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

看看下面的代码：

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 的待办事项。

但是如果 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));

在这里，我们提供了一个不存在的非常大的 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处理程序来打印实际错误。