Fetch API：如何判断错误是否是网络错误

Question

所以我有一些这样的代码：

async function getData() {
  const response = await fetch(/* ... */);
  const json = await response.json();
  return transform(json);
}

哪里transform可以抛出一些它自己的错误。

---

我尝试从 API 中捕获网络错误fetch。

try {
  const data = await getData();

  // ...
  return // ...
} catch (e) {
  if (isNetworkError(e)) {
    return localStorage.getItem('...');
  }

  throw e;
}

我的问题是如何实现isNetworkError跨浏览器工作？注意：只有在网络离线时才应返回 true。

似乎 chrome 和 firefox 都会抛出 aTypeError但它们的消息各不相同。

• 火狐浏览器：TypeError: "NetworkError when attempting to fetch resource."
• 铬合金：TypeError: Failed to fetch

Answer 1

如果第一个承诺被拒绝，则这是一个网络错误。这是唯一一次。

\n

\n

从 fetch() 返回的 Promise 不会\xe2\x80\x99t 拒绝 HTTP 错误状态\n，即使响应是 HTTP 404 或 500。相反，它将正常解析\n（将 ok 状态设置为 false），并且它将仅在出现网络故障或有任何情况阻止请求完成时才拒绝。

\n

\n

来自 Mozilla 开发者页面：\n https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

\n\n

编辑：正如评论和其他答案中所指出的，您还应该注意“或者如果有任何事情阻止请求完成”这一行。fetch这意味着除了其他问题之外，最初的 Promise还会因网络错误而被拒绝。例如，无效的 URL 或 CORS 错误。

\n

如果 fetch 能够成功地将您的请求发送到服务器，它将成功解析第一个 Promise，否则第一个 Promise 将被拒绝。对于 CORS 来说，错误发生在你的请求实际发出之前（在 OPTIONS 请求中），这就是错误发生在第一个 Promise 中的原因。

\n

Answer 2

作为 的客户端fetch，您无法区分网络错误和由于构建不正确的请求而导致的其他错误，因为两者都被抛出为TypeErrors。（请参阅https://developer.mozilla.org/en-US/docs/Web/API/fetch#exceptions）。

这是一个很大的缺陷，因为导致错误构建请求的应用程序缺陷可能会被忽视，被掩盖，就好像它们是偶然的网络错误一样。