從 XMLHttpRequest send() 捕獲異步網絡錯誤

Question

我正在使用XMLHttpRequest異步發出 http 請求：

xhr.open(method, uri, true);

當我發送something ：

xhr.send(something)

當服務器關閉時，它會拋出以下錯誤：

net::ERR_CONNECTION_REFUSED

我怎樣才能捕捉和處理這個錯誤？ 標准try..catch塊不起作用，因為請求是異步的。

提前致謝。

Answer 1

使用XMLHttpRequest的onerror事件：

function aGet(url, cb) {
    var x = new XMLHttpRequest();
    x.onload = function(e) {
        cb(x.responseText)
    };
    x.onerror= function(e) {
        alert("Error fetching " + url);
    };
    x.open("GET", url, true);
    x.send();
}

var dmp = console.log.bind(console); // Dummy callback to dump to console
aGet("/", dmp) // Ok, uses onload to trigger callback
aGet("http://dgfgdf.com/sdfsdf", dmp); // Fails, uses onerror to trigger alert

Answer 2

我寫了一個完整的解決方案來解決這個問題。 它完美地工作！
我有一個名為networkOrfail的函數，如果網絡可用，它將嘗試每秒重新發送XMLHttpRequest 。 否則，它將忽略該請求。
當請求成功時，輪詢停止並返回響應。

下面是如何檢測網絡是否可用：

function getNavigatorConection() {
    return navigator.onLine;
}

然后，創建您的XMLHttpRequest ：

function makeRequest() {
    let xhr = new XMLHttpRequest();
    xhr.open('GET', 'anypage/anotherpage', true);
    xhr.timeout = 2000;
    xhr.onload = function () {
        // Your request is completed
        if (xhr.readyState == 4 && xhr.status == 200) {
            // You're in a successfully condition
        }
    };
    xhr.ontimeout = function (e) {
        // Your request timed out
    };
    xhr.send(null);
}

現在，定義您的輪詢方法如下：

function networkOrFail(callFunc, callTime) {
    let connected = getNavigatorConection();
    let callableTimes = callTime < 2000 ? 2000 : callTime;
    let toursBegin = 3;
    let tours = toursBegin;
    let intervalId;
    let request = function() {
        intervalId = setInterval(function() { 
        let connected = getNavigatorConection();
        if (tours > 0) {
            if (connected) {
                callFunc();
                tours =0;
                return false;
            }
            tours--;
            alert("i tryied againt to resend for another time and it remain just "+tours+" to retry");
        } else {
            clearRequest();
            tours =toursBegin;
        }
    }, callableTimes > 5000 ? 5000 : callableTimes);

    };
    let clearRequest = function() {
        clearInterval(intervalId);
        intervalId = null;
    };
    if (connected)
        callFunc();
    else
        request();
}

最后，通過輪詢方法調用 send 方法，方法是將它與以分鍾為單位的超時時間一起傳遞：

networkOrFail(makeRequest, 5000);