如何在使用XMLHttpRequest时向用户显示实际的网络错误

How do display actual network error to user when using XMLHttpRequest?

本文关键字：显示 错误 网络 用户 XMLHttpRequest      更新时间：2023-09-26

XMLHttpRequest.status通常只有"0"，如果在尝试进行Ajax/XMLHttpRequest调用时发生了某种网络类型错误。但是，肯定应该有一种方法来告诉用户网络错误是什么，例如DNS解析是否失败，或者连接是否被主动拒绝，甚至连接是否已经建立，但在发送任何有效的HTTP响应之前就中止了？I.E.至少在JavaScript控制台中打印出一些额外的信息，例如

SCRIPT7002:XMLHttpRequest:网络错误0x2efd，由于错误00002efd而无法完成操作。

但它很难友好，我不知道如何从javascript中查询这些信息，并将其转换为可以向用户显示的内容。

我不介意它是否必须针对不同的浏览器进行不同的实现，但我目前很难找到任何获取这些信息的方法。

BTW至少我想能够区分：

  • a） 没有互联网连接（例如wifi断开）
  • b） DNS故障（无法解析名称）
  • c） 无法建立到服务器的TCP连接（主动拒绝或超时）
  • d） 无效响应（不是HTTP响应）
  • e） SSL证书失败

在任何情况下，如果返回了有效的HTTP响应，但状态不是200 OK，那也没关系——我可以向用户显示一条合理的错误消息。但对于其他任何事情，似乎都没有办法区分各种可能的错误类型。在我的应用程序中，用户负责提供发出Ajax请求的地址，所以如果他们弄错了，我希望能够告诉他们请求失败的原因。

处理XHR的onerror可以帮助您了解出了什么问题的实际细节；如果ontimeout处理程序超时，您也可以尝试专门捕获它；并且正如@dandavis在XHR之前提到的，您也可以在呼叫XHR之前检查navigator.onLine，以避免出现任何无网络情况。这里有一个简单的存根：

function makeRequest() {
    if(navigator.onLine){
    let xhr = new XMLHttpRequest();
    xhr.open('GET', 'someurl/somepage', true);
    xhr.timeout = 2000;
    xhr.onload = function () {
        // Your request is completed
        if (xhr.readyState == 4 && xhr.status == 200) {
            //successful
        }
    };
    x.onerror= function(e) {
    //Error occured, e will give you more information
    };
    xhr.ontimeout = function (e) {
        // Your request timed out
    };
    xhr.send(null);
  }
  else{
    alert('No network connection');
  }
}

您最好深入了解XMLHttpRequest实例的oneror事件

xhr.onerror = function(e) {
   if(e matches stuation 1) {
      console.log('no internet connectivity (e.g. wifi disconnected)');
   } else {
      //...other conditions
   }
};

可能很难判断发生的确切错误类型，只需检查e.message或其他内容即可。

请注意，状态代码！=200将不会触发oneror事件，而是触发onload事件。小心处理

相关文章：