如何处理 JavaScript Fetch 错误？

Posted 2023-02-27

【中文标题】如何处理 JavaScript Fetch 错误？

【英文标题】：How do I handle JavaScript Fetch errors?

【发布时间】：2017-01-16 13:29:04

【问题描述】：

如果在 Chrome 中调用 fetch 失败，那么我返回的唯一错误详细信息是

TypeError: 获取失败

在这种情况下，如何向最终用户显示信息性错误消息？

具体来说：

是否可以获得有关提取失败原因的任何详细信息？

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

据我所知，答案是否定的；我认为这是出于安全原因，以避免让恶意 JS 通过检查错误消息来发现哪些网站可以访问，哪些网站不能访问。

是否可以将 fetch 错误与其他 TypeErrors 区分开来？

如果我无法获得错误详细信息，我想至少用信息丰富的“无法访问网站；请稍后再试”消息替换非常模糊的“无法获取”消息，我会喜欢这样做，而不会为其他 TypeErrors 显示该消息。

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

【问题讨论】：

TypeError 似乎......真的是错误的错误类型。奇怪。

.catch 不适合你？

@JaromandaX - @JaromandaX - .catch 有效，但如果可能，我想获取错误详细信息（我的第一个问题），并避免错误地将其他 TypeErrors 捕获为获取错误，我觉得我要么必须把.catch very 放在fetch 附近（这样就不会发生其他错误，从而失去了我如何构建我的承诺的灵活性）或依赖于特定于浏览器的行为，如文本获取message（我的第二个问题）。

我的意思是处理.catch 中的错误会停止输出到控制台（我认为这就是显示此错误的地方）

TypeError: Failed to fetch 消息是您在 .catch 中获得的全部信息，因此您必须做一些花哨的步骤才能将其更改为有意义的消息 - .catch 可以在末尾链条，没关系

【参考方案1】：

似乎没有更多关于网络/权限/输入问题的详细信息。

是否可以将 fetch 错误与其他 TypeError 区分开来？

是的，您只需要catch 只需fetch 调用中的错误：

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

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

【讨论】：

检查获取的 url 的协议也是值得的。在 http:// 网站上调用 https:// 可能会导致此错误

另外，检查您的4XX 和5XX 响应是否没有返回Access-Control-Allow-Origin: * 标头也可能是原因。