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

时间:2015-03-18 00:07:34

标签: javascript ajax xmlhttprequest

如果尝试进行Ajax / XMLHttpRequest调用时发生某些网络类型错误,则XMLHttpRequest.status通常只是“0”。但肯定应该有一种方法可以准确地告诉用户网络错误是什么,例如是否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请求,因此如果他们弄错了,我希望能够告诉他们请求失败的原因。

2 个答案:

答案 0 :(得分:1)

处理onerror中的XHR可以在这里为您提供有关发生问题的实际详细信息的更多信息;您也可以尝试ontimeout处理程序来捕获特定的超时信息;就像@dandavis在XHR之前提到的那样,您也可以在致电navigator.onLine之前检查XHR以避免任何网络问题。 这里有一个简单的存根:

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');
  }
}

答案 1 :(得分:0)

您最好深入研究XMLHttpRequest实例的onerror事件

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

可能在某种程度上难以判断错误的确切类型,只需尝试检查e.message或其他内容。

请注意,状态代码!= 200不会触发onerror事件,而是触发onload事件。小心处理