Wykrywanie, że wywołanie jQuery.ajax nie powiodło się, ponieważ strona jest przeładowywana?

Question

Wykonuję wiele wywołań $ .ajax, a ja przetwarzam błędy z nich w taki sposób, że generują komunikat. Uważam, że jeśli wywołanie ajax jest w toku, gdy strona zostanie przeładowana, np. kliknij odśwież, lub przejdź do innego adresu URL, a następnie moje oczekujące wywołania ajax wywołują ich wezwania błędów.

Jak odróżnić prawdziwy błąd od połączenia, które zostało przerwane, ponieważ strona została załadowana ponownie?

Answer 1

Dodaj obsługę unload, która ustawia flagę na true. Następnie, wewnątrz obsługi error, możesz sprawdzić tę flagę i zrobić coś odpowiedniego.

przykład:

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

Powyższa technika nie działa okresowo orzeźwiający strony (na przykład co pół sekundy). Zorientowałem się, że błąd spowodowany odświeżaniem strony można uniknąć, opóźniając proces obsługi błędów o niewielki czas.

przykład:

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

Poza tą

window.onbeforeunload = funkcja() {// połączeń zatrzymania ajax}

zdarzenia mogą być wykorzystane do rzadziej odświeżanie wywołań ajaxowych.

Answer 3

Lepszym sposobem bez timeoutów i innych magicznych flag jest sprawdzanie nagłówków xhr. Jeśli nie ma nagłówków, odpowiedź nie pochodzi z serwera, żądanie zostało przerwane.

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

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

Można owinąć żądania ajax z $ .Defered jak poniżej i używać dzieje \ defered obiektu niepowodzeniem.

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