检测到 jQuery.ajax 调用失败，因为页面正在重新加载？答案

【问题标题】：Detecting that a jQuery.ajax call failed because the page is reloading?检测到 jQuery.ajax 调用失败，因为页面正在重新加载？
【发布时间】：2012-03-12 22:18:50
【问题描述】：

我进行了很多 $.ajax 调用，并以抛出消息的方式处理来自它们的错误。我发现如果在重新加载页面时正在进行 ajax 调用，例如单击刷新，或导航到另一个 URL，然后我正在进行的 ajax 调用会触发它们的错误回调。

如何区分真正的错误和因页面重新加载而中止的调用？

$.ajax(...)
.success(...)
.error(function(jqXHR) {
  // jqXHR.status == 0 means either failed to contact server,
  // or aborted due to page reload -- how can I tell the difference?
});

【问题讨论】：

您查看过 jqXHR 对象中可用的内容吗？
阿德里安：我已经阅读了文档。你指的是特别的东西吗？

标签： jquery ajax

【解决方案1】：

添加一个unload 处理程序，它将标志设置为真。然后，在error 处理程序中，您可以检查此标志，并做一些适当的事情。

例子：

var unloading = false;
$.ajax(...) ...
 .error(function(jqXHR) {
    if (unloading) return; // Ignore errors caused by navigating away
    // Now, check for real errors ..
});
$(window).unload(function() {unloading = true;});

【讨论】：

这种方法对我有用，但我不得不将错误处理程序主体放在 setTimeout(function(), 250) 内，因为错误处理程序在 window.unload() 函数之前触发

【解决方案2】：

没有超时和其他魔法标志的更好方法是检查 xhr 标头。如果没有标头，则响应不是来自服务器，则请求被中止。

var isUserAbortedRequest = function (xhr) {
    return !xhr.getAllResponseHeaders();
}

ajaxRequest
    .fail(function (xhr, error, statusText) {
        console.log("request aborted = ", isUserAbortedRequest(xhr));
    })
    .success(...)

您可以使用 $.Defered 包装您的 ajax 请求，如下所示，并使用延迟对象的 done\fail。

$.Deferred(function (def) {           
    ajaxRequest
        .fail(function (xhr, error, statusText) {
            console.log("request aborted = ", isUserAbortedRequest(xhr));

            def.reject({ aborted: isUserAbortedRequest(xhr), error: error });
        })
        .success(function (response) {
            if (response.success == true) {
                def.resolve(response.data);
            }
            else {
                def.reject({ aborted: false, error: response.error });
            }
        });
});

【讨论】：

与其他答案相比，这些似乎更可取。相关、相关问答：stackoverflow.com/questions/9229005/…
此解决方案仅区分来自服务器的错误和不来自服务器的错误。但它无法区分网络错误（不是来自服务器）和用户离开页面。

【解决方案3】：

var unloading = false;
$.ajax(...) ...
 .error(function(jqXHR) {
    if (unloading) return; // Ignore errors caused by navigating away
    // Now, check for real errors ..
});
$(window).unload(function() {unloading = true;});

上述技术不适用于定期刷新的页面（例如每半秒）。我发现可以通过将错误处理过程延迟一小段时间来避免刷新页面引起的错误。

例子：

$.ajax(...)
.success(...)
.error(function(jqXHR) {
setTimeout(function() {
  // error showing process
}, 1000);
});

除此之外

window.onbeforeunload = function() {//停止 ajax 调用}

事件可用于不频繁刷新的 ajax 调用。

【讨论】：