问Fetch API:如何确定错误是否为网络错误

EN

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

从fetch()返回的承诺不会拒绝HTTP状态，即使响应是HTTP404或500。相反，它将正常解决(将ok状态设置为false)，并且它只会在网络故障或任何阻碍请求完成的情况下拒绝。

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

编辑:正如评论和其他答案中所指出的，你也应该注意这句话“或者如果有什么事情阻碍了请求的完成”。这意味着fetch的最初承诺除了其他问题外，还会拒绝网络错误。例如，无效的URL或CORS错误。

如果fetch能够成功地使用您的请求到达服务器，它将成功地解决第一个承诺，否则第一个承诺将被拒绝。在CORS的情况下，错误发生在实际发送请求之前(在OPTIONS请求中)，这就是为什么错误发生在第一个承诺中。

作为fetch的客户端，您不能将网络错误与构建错误请求所导致的其他错误区分开来，因为这两个错误都是以TypeError的形式抛出的(参见https://developer.mozilla.org/en-US/docs/Web/API/fetch#exceptions)。

这是一个相当大的缺陷，因为导致错误构建请求的应用程序缺陷可能会被忽略，就好像它们是间接网络错误一样。

我没有一个完美的答案给你。最容易解决的确切问题是将isNetworkError实现为类型保护。也许firefox/chrome对象上有一些共同的属性，可以让您具体地检测到这些属性。

另一种方法是捕获更接近fetch()的错误，并将错误重新抛出为您可以很容易检测到的内容。

async function getData() {
  let response;

  try {
    response = await fetch(/* ... */);
  } catch (err) {
    throw new MyCustomNetworkError(err.message);
  }
  const json = await response.json();
  return transform(json);
}