Detectando que una llamada jQuery.ajax falló porque la página se está recargando?

Question

Hago muchas llamadas $ .ajax, y manejo los errores de ellas de una manera que arroja un mensaje. Encuentro que si hay una llamada ajax en curso mientras la página se vuelve a cargar, p. haga clic en Actualizar, o navegue a otra URL, luego mis llamadas ajax en progreso disparan sus devoluciones de llamada de error.

¿Cómo puedo saber la diferencia entre un error real y una llamada abortada porque la página se recargó?

$.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? 
}); 

Answer 1

agregar un controlador de unload, que establece un indicador en true. Luego, dentro del controlador error, puede marcar esta bandera y hacer algo apropiado.

Ejemplo:

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

Answer 2

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

La técnica anterior no funciona para una página periódicamente refrescante (por ejemplo cada media segundos). He descubierto que el error causado por la actualización de la página se puede evitar mediante el retraso del proceso de manejo de errores por un período de tiempo reducido.

Ejemplo:

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

Además de eso

window.onbeforeunload = function() {// llamadas parada ajax}

evento se puede utilizar para menos frecuencia refrescantes llamadas ajax.

Answer 3

La mejor manera sin tiempos de espera y otros indicadores mágicos es comprobar encabezados xhr. Si no hay encabezados, entonces la respuesta no vino del servidor, entonces la solicitud fue cancelada.

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

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

Puede envolver su solicitud de AJAX con $. Se deletreó a continuación y utiliza el objeto proporcionado hecho/no.

$.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 }); 
      } 
     }); 
});