如何在 JavaScript 中捕获 NetworkError？

Posted 2023-02-16

【中文标题】如何在 JavaScript 中捕获 NetworkError？

【英文标题】：How to catch NetworkError in JavaScript?

【发布时间】：2013-12-12 10:08:10

【问题描述】：

在 Chrome 的 javascript 控制台中，如果我运行这个：

var that = new XMLHttpRequest();
that.open('GET', 'http://this_is_a_bad_url.com', false);
that.send();

我收到一个故意的错误：

NetworkError: A network error occurred.

我想抓住这个，所以我使用：

var that = new XMLHttpRequest();
that.open('GET', 'http://this_is_a_bad_url.com', false);
try 
  that.send();
 catch(exception) 
  if(exception instanceof NetworkError) 
    console.log('There was a network error.');
  

但是，我收到有关未定义 NetworkError 的错误：

ReferenceError: NetworkError is not defined

如何捕获 NetworkError？

【参考方案1】：

我想你的意思是：

if(exception.name == 'NetworkError')
   console.log('There was a network error.');

我不相信错误是NetworkError 的实例，而是以这种方式抛出：

throw 
   name: 'NetworkError',
   message: 'A network error occurred.'
   // etc...

【讨论】：

这很好用。我还应该问：在 Chrome 的 JS 控制台中，它仍然显示“GET (url)”，左侧有一个红色 X，同时在控制台右下角计算错误。有没有办法抓住这个？

Afaik chrome 控制台以这种方式显示所有失败的请求，捕获错误将防止破坏您的代码

在 Firefox 中，错误名称为 TypeError，但消息显示为 NetworkError when attempting to fetch resource

【参考方案2】：

我在寻找一种方法来检查我在使用 Axios 时得到的 Network Error 时找到了这个答案，所以如果你不使用 Axios，这个答案可能是 not 为你。

我通过Axios收到的错误对象有config、request和response属性，request和response都有status属性。 response对象的属性如下图所示：

我的 axios 配置如下：

this.client = axios.create(options);
this.client.interceptors.response.use(this.handleSuccessResponse, this.handleErrorResponse);
this.unauthorizedCallback = () => ;

handleErrorResponse 方法是：

handleErrorResponse(error) 
  // use the information from the error object here

---

编辑：正如@Erdős-Bacon建议的那样：

如果您使用的是 axios 和 nginx，这可能是您的评论。我遇到了error.response 是undefined 的问题，原来是因为 CORS 问题。必须将我的 nginx 配置设置为关键字始终添加适当的标头来解决 CORS，否则标头会因错误响应而被剥离，因此会出现 CORS 问题。请参阅this answer 了解更多信息。

【讨论】：

FWIW，我的axios网络错误请求状态为0，响应对象未定义。

@DylanSmith 你确定你在正确的地方检查吗？还是以正确的方式捕捉它？

我想是的。我正在使用的条件是服务器不可访问（类似于 OP），因此没有响应，因此未定义是有道理的。

嗯，这是一个特殊情况，你现在知道如何处理了:)

@DylanSmith 支持。你说得对。答案不适合 axios，因为 result.name 对我来说总是 "Error" 有 axios 错误。检查 result.response 是否未定义适用于检查第 5 层以下的网络错误。结果还包含布尔值 isAxiosError。

【参考方案3】：

查看onreadystatechange 事件。您可以获取响应的状态。

【讨论】：

readystate 直到 send() 被调用后才会改变，但是 send() 调用是产生异常的原因。

【参考方案4】：

exception.name 即使出现网络错误也会返回“错误” 更好的方法是检查错误是否具有这样的 url 配置：

if(exception.config && exception.config.url)
  // network error
 else 
  // other errors