Jquery Ajax error handling to ignore aborted

问题:

I want to have a global error handling method for ajax calls, this is what I have now:

$.ajaxSetup({
  error: function (XMLHttpRequest, textStatus, errorThrown) {
    displayError();
  }
});

I need to ignore the error of aborted. errorThrown is null and textStatus is error. How do I check for aborted?

回答1:

I had to deal with the same use case today. The app I am working on has these long-running ajax calls that can be interrupted by 1) the user navigating away or 2) some kind of temporary connection/server failure. I want the error handler to run only for connection/server failure and not for the user navigating away.

I first tried Alastair Pitts' answer, but it did not work because both aborted requests and connection failure set status code and readyState to 0. Next, I tried sieppl's answer; also did not work because in both cases, no response is given, thus no header.

The only solution that worked for me is to set a listener for window.onbeforeunload, which sets a global variable to indicate that the page has been unloaded. The error handler can then check and only call the error handler only if the page has not been unloaded.

var globalVars = {unloaded:false};
$(window).bind('beforeunload', function(){
    globalVars.unloaded = true;
});
...
$.ajax({
    error: function(jqXHR,status,error){
        if (globalVars.unloaded)
            return;
    }
});

回答2:

In modern jQuery you can just check if request.statusText is equal to 'abort':

error: function (request, textStatus, errorThrown) {
    if (request.statusText =='abort') {
        return;
    }
}

回答3:

Something I found is that when there is an aborted request, the status and/or readyState equal 0.

In my global error handler, I have a check at the top of the method:

$(document).ajaxError(function (e, jqXHR, ajaxSettings, thrownError) {
    //If either of these are true, then it's not a true error and we don't care
    if (jqXHR.status === 0 || jqXHR.readyState === 0) {
        return;
    }

    //Do Stuff Here
});

I've found this works perfectly for me. Hope this helps you, or anyone else who runs into this :)

回答4:

You'll want to look at the textStatus argument passed into your error function. According to http://api.jquery.com/jQuery.ajax/, it can take the values "success", "notmodified", "error", "timeout", "abort", or "parsererror". "abort" is obviously what you want to check against.

Longer notes here: jquery-gotcha-error-callback-triggered-on-xhr-abort

回答5:

Because bluecollarcoders answer doesn't work for ajax requests aborted by javascript, here is my solution:

var unloaded = false;
...
$(window).bind('beforeunload', function(){
    unloaded = true;
});


$(document).ajaxError(function(event, request, settings) {
    if (unloaded || request.statusText == "abort") {
        return;
    }
    ...
}

e.g.

handler = jQuery.get("foo")
handler.abort()

will now be ignored by ajaxError handler

回答6:

Building upon Alastair Pitts'a answer, you can also do this to have more informative messages:

$(document).ajaxError(function (e, jqXHR, ajaxSettings, thrownError)
{
    {
        if (jqXHR.status === 0)
        {
            alert('Not connect.\n Verify Network.');
        } else if (jqXHR.status == 404)
        {
            alert('Requested page not found. [404]');
        } else if (jqXHR.status == 500)
        {
            alert('Internal Server Error [500].');
        } else if (exception === 'parsererror')
        {
            alert('Requested JSON parse failed.');
        } else if (exception === 'timeout')
        {
            alert('Time out error.');
        } else if (exception === 'abort')
        {
            alert('Ajax request aborted.');
        } else
        {
            alert('Uncaught Error.\n' + jqXHR.responseText);
        }
    }
});

回答7:

$(document).ajaxError(function(event, jqXHR, ajaxSettings, thrownError) {

    if (!jqXHR.getAllResponseHeaders()) {
        return;
    }           
}); 

回答8:

I had the same issue here, and what I did as solution was to set an "aborting" var just before the call of abort(), as below:

aborting = true;
myAjax.abort();

and only show the error on the error handler of the ajax request, if abort isn't true.

$.ajax({
    [..]
    error: function() {
        if ( !aborting ) {
            // do some stuff..
        }
        aborting = false;
    }
});

回答9:

The quick (and dirty) solution:

if (status === 0) { // or -1 depending on where you do this
  setTimeout(function() {
    // error handling here
  }, 2000); // 2 seconds, or use more ...
}

if the xhr error status is 0 (*) set a delay of 2 seconds around error handling code, by that time the browser has already loaded the new page context and the error will never show.

If the error was not due to an abort by navigating to another page the error will show with some delay.

*NOTE: depending on the used libs and which error handler you use it may be -1 instead of zero (Angular ...) or something else entirely.

IMPORTANT: the status text may vary from one browser to another and used libs so IMHO you cannot rely on it, please let me know in the comments if you find a cross-browser solution