如何处理JavaScript Fetch错误？

Question

如果在Chrome中进行fetch调用失败，则我只会收到如下错误信息：

TypeError: Failed to fetch

那么在这种情况下，我该如何向最终用户显示有关此错误的详细信息呢？

具体来说：

是否有可能获取有关fetch失败原因的任何详细信息？

例如，如果服务器崩溃，Chrome DevTools可能会记录一个net:ERR_EMPTY_RESPONSE控制台消息，但似乎无法从JavaScript中访问它。

据我所知，答案是不行的。我认为这是出于安全原因，以避免恶意JS通过检查错误消息找出哪些站点是可访问的。

是否可能区分fetch错误和其他TypeError？

如果我无法获取错误详细信息，我希望至少用“无法访问网站，请稍后再试”等信息替换可怕的“Failed to fetch”消息，并且我希望在没有显示该消息的风险的情况下实现此目标。

我在这里找到的唯一解决方案是检查实际的message，看它是否为"Failed to fetch"。显然这是特定于浏览器的；它在Chrome中起作用，在任何Chrome用户语言中似乎都可以工作，其他浏览器需要进行自己的测试和处理。

- Josh Kelley

---

“TypeError” 似乎是一个错误的错误类型。奇怪。 - T.J. Crowder

.catch 对你无效？ - Jaromanda X

@JaromandaX - .catch 可以使用，但如果可能的话，我想获取错误详情（我的第一个问题），为了避免错误地捕获其他 TypeError 作为 fetch 错误，我觉得我要么必须将.catch 放置非常接近 fetch（这样就不会发生其他错误，从而失去了我如何构建 promises 的灵活性），要么依赖于特定于浏览器的行为，例如 fetch message 的文本（我的第二个问题）。 - Josh Kelley

我的意思是，在.catch中处理错误是否会停止输出到控制台（我认为这个错误是在那里显示的）。 - Jaromanda X

“TypeError: Failed to fetch”消息是在.catch中所得到的全部内容，因此您需要进行一些巧妙的操作，将其更改为有意义的消息 - .catch可以在链的末尾，这并不重要。 - Jaromanda X

Answer 1

看起来与网络/权限/输入问题相关的详细信息已经没有了。

是否有可能区分获取错误和其他类型错误？

是的，您只需要捕获来自fetch调用的错误：

fetch(…)
.catch(err => new FetchError(err))
.…

class FetchError extends Error {
    constructor(orig) {
        super();
        this.message = "fetch error";
        this.details = orig;
    }
}

- Bergi

---

值得注意的是，还要检查获取的URL的协议。在http://网站上调用https://可能会导致此错误。 - Damian Green

此外，检查您的 4XX 和 5XX 响应是否未返回 Access-Control-Allow-Origin: * 标头也可能是问题的原因。 - James Marino