使用Promise和Fetch的数据获取和错误处理

最新推荐文章于 2024-08-28 23:30:11 发布

samKnowsCoding

最新推荐文章于 2024-08-28 23:30:11 发布

阅读量1.3k

点赞数

文章标签： Fetch API Promise JavaScript

本文链接：https://blog.csdn.net/samKnowsCoding/article/details/100985069

版权

本文探讨了Fetch API返回的Promise如何处理HTTP错误状态，强调了即使HTTP响应为404或500，Promise也不会被拒绝。fetch只在网络故障时拒绝。通过Response.ok属性判断HTTP响应是否成功，结合Promise处理数据获取和错误。示例代码展示了如何在http.js和app.js中使用fetch获取和处理JSON数据。

摘要由CSDN通过智能技术生成

拿post和delete举例说明吧

The Promise returned from fetch() won’t reject on HTTP error status even if the response is an HTTP 404 or 500. Instead, it will resolve normally (with ok status set to false), and it will only reject on network failure or if anything prevented the request from completing.

http.js这个文件用来处理fetch请求，app.js设置初始的参数
关于fetch比较重要的是，fetch返回一个promise，fetch（） API 仅在遇到"网络错误"时拒绝承诺，尽管这通常意味着权限问题或类似问题。基本上，fetch（）将拒绝承诺，如果用户脱机，或发生一些不太可能的网络错误，如 DNS 查找失败。
如果遇到网络故障，fetch() promise 将会 reject，带上一个 TypeError 对象。虽然这个情况经常是遇到了权限问题或类似问题——比如 404 不是一个网络故障。想要精确的判断 fetch() 是否成功，需要包含 promise resolved 的情况，此时再判断 Response.ok 是不是为 true。

好消息是，fetch提供了一个简单的 OK 标志，指示 HTTP 响应的状态代码是否处于成功范围内。例如，以下代码日志"错误：内部服务器错误（…）"：

fetch("http://httpstat.us/500")
    .then(function(response) {
   
        if (!response.ok) {
   
            throw Error(response.statusText);
        }
        return response;
    }).then(function(response) {