如何使用 Fetch Promise 捕获错误：为什么条件拒绝不起作用？-js教程-PHP中文网

如何使用 Fetch Promise 捕获错误：为什么条件拒绝不起作用？

DDD

发布： 2024-11-13 03:36:02

原创

348 人浏览过

How to Catch Errors with Fetch Promises: Why Conditional Rejection Doesn't Work?

使用 Fetch Promises 捕获错误：条件拒绝

在 Redux 应用程序中，开发人员经常使用 fetch 来进行异步请求。但是，请求失败时处理错误可能具有挑战性，特别是当请求返回非 OK 状态代码时。

考虑以下代码片段：

function fetchVehicle(id) {
    return dispatch => {
        return dispatch({
            type: 'FETCH_VEHICLE',
            payload: fetch(`http://swapi.co/api/vehicles/${id}/`)
                .then(status)
                .then(res => res.json())
                .catch(error => {
                    throw(error);
                })
        });
    };
}

function status(res) {
    if (!res.ok) {
        return Promise.reject()
    }
    return res;
}

登录后复制

目标是拒绝如果状态代码不正常，则承诺并在减速器中捕获错误。然而，代码没有按预期工作：promise 没有被拒绝。

了解 Fetch Promises

当发生网络错误时，Fetch Promises 仅会拒绝并出现 TypeError 。带有 4xx 或 5xx 状态代码的响应不被视为网络错误，因此不会抛出错误。

抛出自定义错误

要捕获这些非网络错误，如果状态代码指示请求失败，我们可以手动抛出错误：

function fetchVehicle(id) {
  return fetch(`http://swapi.co/api/vehicles/${id}/`)
    .then(response => {
      if (!response.ok) {
        throw new Error('Something went wrong');
      }
      return response.json();
    })
    .catch(error => {
      console.log(error);
    });
}

登录后复制

现在，如果请求返回非 OK 状态代码，它将触发错误处理程序并记录错误消息。然后reducer就可以适当地处理这个错误。

以上是如何使用 Fetch Promise 捕获错误：为什么条件拒绝不起作用？的详细内容。更多信息请关注PHP中文网其他相关文章！