javascript - 如何在 JavaScript 中捕获 NetworkError？

Question

在 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？

Answer 1

我想你的意思是：

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

我不相信 Error 是 的一个实例NetworkError，而是以这种方式抛出：

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

Answer 2

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

我通过 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，这可能是您的评论。我有问题，原来是因为 CORS 问题error.response。undefined必须将我的 nginx 配置设置为关键字始终添加适当的标头来解决 CORS，否则标头会因错误响应而被剥离，因此会出现 CORS 问题。有关更多信息，请参阅此答案。

Answer 3

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

Answer 4

exception.name即使在网络错误时也返回“错误”，更好的方法可以检查错误是否具有这样的 url 配置：

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