为什么我们在使用 fetch 时检查 response.ok

亦凉 2023-10-01 02:25 22阅读 0赞

看看下面的代码：

fetch('https://jsonplaceholder.typicode.com/todos/4') 
     .then(response => response.json())
     .then(result => console.log('success:',result)) 
     .catch(error => console.log('error:', error));

在这里，我们进行 API 调用以获取一个 id 为 4 的待办事项，它会工作，因为有一个 id 为 4 的待办事项。

![bf185e5d34a77b098c3e2b4a070ef589.png][]

但是如果 id 不存在或者服务器抛出 404 或 500 之类的错误或任何其他错误怎么办？

fetch('https://jsonplaceholder.typicode.com/todos/2382822') 
     .then(response => response.json())
     .then(result => console.log('success:',result)) 
     .catch(error => console.log('error:', error));

![189c2e0206308f3485be84ec7824ec8b.png][]

在这里，我们提供了一个不存在的非常大的 id。但是，如果您在浏览器控制台中执行，您将看到打印成功消息，即使它显然是 404 错误。

理想情况下，`.catch`应该执行处理程序，但在`fetch`.

`fetch`只有在请求失败时才进入`.catch`处理程序，例如当网络不可用或域不存在时。

因此，如果您`fetch`用于执行 CRUD（创建、读取、更新、删除）操作并且 id 不存在，那么您将收到错误消息。

这就是原因，你会发现`fetch`这样写的代码：

fetch('https://jsonplaceholder.typicode.com/todos/4') 
     .then((response) => {
       if (response.ok) { 
        return response.json();
       }
       return Promise.reject(response); 
     })
     .then((result) => { 
       console.log(result); 
     })
     .catch((error) => {
       console.log('Something went wrong.', error); 
     });

在`.then`处理程序内部，我们正在检查响应是否正常。如果响应正常，我们将调用一个将结果发送到下一个处理程序的方法。

如果响应不正确，那么我们将拒绝承诺，因此它将调用`.catch`处理程序来打印实际错误。

[bf185e5d34a77b098c3e2b4a070ef589.png]: https://img-blog.csdnimg.cn/img_convert/bf185e5d34a77b098c3e2b4a070ef589.png
[189c2e0206308f3485be84ec7824ec8b.png]: https://img-blog.csdnimg.cn/img_convert/189c2e0206308f3485be84ec7824ec8b.png