페이지가 다시로드되어 jQuery.ajax 호출에 실패했음을 감지 했습니까?

Question

나는 많은 $ .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? 
}); 

Answer 1

플래그를 true로 설정하는 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;}); 

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

위의 기술 (매 30 초 예를 들어) 주기적으로 상쾌한 페이지에 대해 작동하지 않습니다. 페이지를 새로 고치면 발생하는 오류는 오류 처리 프로세스를 약간의 시간 지연시켜 피할 수 있다는 것을 알아 냈습니다.

예 :

그

window.onbeforeunload = 함수() {// 정지 AJAX 호출} 이외에

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

이벤트가 자주 사용될 수 Ajax 호출 새로 고침.

Answer 3

시간 초과 및 기타 마술 플래그가없는 더 좋은 방법은 xhr 헤더를 확인하는 것입니다. 헤더가없고 응답이 서버에서 오지 않으면 요청이 중단되었습니다.

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

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

다음과 같이 $ .Defered로 Ajax 요청을 감싸고 defered 오브젝트의 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 }); 
      } 
     }); 
});