如何根据HTTP状态码手动拒绝Fetch Promise？

Fetch：基于 HTTP 状态代码控制 Promise 拒绝

在 fetch 领域，promise 通常仅在遇到网络错误时才会被拒绝。但是，在返回 4xx 或 5xx HTTP 状态代码的情况下，默认情况下不会拒绝承诺。

问题：
在您提供的代码中，您尝试当 HTTP 响应状态指示错误时拦截并拒绝承诺。然而，promise 并没有按预期被拒绝。

原因：
当发生网络错误时，Fetch Promise 只会拒绝并出现 TypeError。由于 4xx 和 5xx 响应不是网络错误，因此没有什么可捕获的。要手动拒绝 Promise，您需要自己抛出错误。

解决方案：
要解决此问题并根据 HTTP 状态拒绝 Promise，您可以修改代码如下：

import 'whatwg-fetch';

function fetchVehicle(id) {
    return dispatch => {
        return dispatch({
            type: 'FETCH_VEHICLE',
            payload: fetch(`http://swapi.co/api/vehicles/${id}/`)
                .then(res => {
                    if (!res.ok) {
                        const error = new Error('HTTP Error: ' + res.status);
                        throw error; // Throwing the error here will cause fetch to reject the promise
                    }
                    return res;
                })
                .then(res => res.json())
                .catch(error => {
                    throw error;
                })
            });
    };
}

通过在 fetch Promise 中引入错误处理逻辑，现在如果 HTTP 响应状态指示不成功的情况。这允许您在 redux 中间件的 catch 块中适当地捕获和处理错误。

以上是如何根据HTTP状态码手动拒绝Fetch Promise？的详细内容。更多信息请关注PHP中文网其他相关文章！