首页 > web前端 > js教程 > 如何根据HTTP状态码手动拒绝Fetch Promise?

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

DDD
发布: 2024-11-10 01:21:02
原创
555 人浏览过

How Can I Manually Reject Fetch Promises Based on HTTP Status Codes?

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

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

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

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

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中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板