아약스에 대한 시간 초과 설정 (jQuery)

$.ajax({
    url: "test.html",
    error: function(){
        //do something
    },
    success: function(){
        //do something
    }
});

때로는 success기능이 제대로 작동하지만 때로는 그렇지 않습니다.

이 아약스 요청에 대한 시간 초과를 어떻게 설정합니까? 예를 들어 시간이 초과되면 3 초 후에 오류가 표시됩니다.

문제는 ajax 요청이 완료 될 때까지 블록을 정지한다는 것입니다. 서버가 잠시 다운되면 종료되지 않습니다.

$.ajax 설명서를 읽으십시오 .이 주제는 다루어집니다.

$.ajax({
    url: "test.html",
    error: function(){
        // will fire when timeout is reached
    },
    success: function(){
        //do something
    },
    timeout: 3000 // sets timeout to 3 seconds
});

error: function(jqXHR, textStatus, errorThrown)옵션 의 textStatus 매개 변수에 액세스하여 어떤 유형의 오류가 발생했는지 확인할 수 있습니다 . 옵션은 "timeout", "error", "abort"및 "parsererror"입니다.

다음은 jQuery의 이전 및 새로운 패러다임에서 시간 초과 설정 및 감지를 보여주는 몇 가지 예입니다.

Live Demo

jQuery 1.8 이상으로 약속

Promise.resolve(
  $.ajax({
    url: '/getData',
    timeout:3000 //3 second timeout
  })
).then(function(){
  //do something
}).catch(function(e) {
  if(e.statusText == 'timeout')
  {     
    alert('Native Promise: Failed from timeout'); 
    //do something. Try again perhaps?
  }
});

jQuery 1.8 이상

$.ajax({
    url: '/getData',
    timeout:3000 //3 second timeout
}).done(function(){
    //do something
}).fail(function(jqXHR, textStatus){
    if(textStatus === 'timeout')
    {     
        alert('Failed from timeout'); 
        //do something. Try again perhaps?
    }
});​

jQuery <= 1.7.2

$.ajax({
    url: '/getData',
    error: function(jqXHR, textStatus){
        if(textStatus === 'timeout')
        {     
             alert('Failed from timeout');         
            //do something. Try again perhaps?
        }
    },
    success: function(){
        //do something
    },
    timeout:3000 //3 second timeout
});

것을 알 수 textStatus의 PARAM (또는 jqXHR.statusText가 ) 오류가 무엇인지 알려줍니다. 실패가 시간 초과로 인해 발생한 것을 알고 싶은 경우에 유용 할 수 있습니다.

오류 (jqXHR, textStatus, errorThrown)

요청이 실패하면 호출 할 함수입니다. 이 함수는 jqXHR (jQuery 1.4.x에서 XMLHttpRequest) 오브젝트, 발생한 오류 유형을 설명하는 문자열 및 발생하는 경우 선택적 예외 오브젝트를 수신합니다. 두 번째 인수 (널 제외)에 가능한 값은 "timeout", "error", "abort"및 "parsererror"입니다. HTTP 오류가 발생하면 errorThrown은 "Not Found"또는 "Internal Server Error"와 같은 HTTP 상태의 텍스트 부분을 수신합니다. jQuery 1.5부터는 오류 설정에 여러 함수를 사용할 수 있습니다. 각 기능이 차례로 호출됩니다. 참고 :이 핸들러는 도메인 간 스크립트 및 JSONP 요청에 대해 호출되지 않습니다.

src : http://api.jquery.com/jQuery.ajax/

다음 timeout과 같이 ajax 옵션에서 설정을 사용할 수 있습니다 .

$.ajax({
    url: "test.html",
    timeout: 3000,
    error: function(){
        //do something
    },
    success: function(){
        //do something
    }
});

http://api.jquery.com/jQuery.ajax/ 에서 아약스 옵션에 대한 모든 내용을 읽으십시오.

시간 초과가 발생하면 error핸들러가 아닌 핸들러가 트리거됩니다. success:)

모든 기능을 갖춘 .ajaxjQuery 함수를 사용하십시오 . 예 를 보려면 https://stackoverflow.com/a/3543713/1689451 과 비교 하십시오 .

테스트하지 않고 참조 된 SO 질문과 코드를 병합하면됩니다.

target = $(this).attr('data-target');

$.ajax({
    url: $(this).attr('href'),
    type: "GET",
    timeout: 2000,
    success: function(response) { $(target).modal({
        show: true
    }); },
    error: function(x, t, m) {
        if(t==="timeout") {
            alert("got timeout");
        } else {
            alert(t);
        }
    }
});​