it-swarm-pt.tech

Definir tempo limite para ajax (jQuery)

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

Às vezes, a função success funciona bem, outras vezes não.

Como faço para definir o tempo limite para esta solicitação de ajax? Por exemplo, 3 segundos, se o tempo acabar, mostre um erro.

O problema é que o pedido do ajax congela o bloco até o fim. Se o servidor ficar inativo por um tempo, ele nunca terminará.

169
James

Por favor, leia o $.ajaxdocumentation , este é um tópico coberto.

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

Você pode ver qual tipo de erro foi acionado acessando o parâmetro textStatus da opção error: function(jqXHR, textStatus, errorThrown). As opções são "timeout", "error", "abort" e "parsererror".

285
Intelekshual

Veja alguns exemplos que demonstram a configuração e a detecção de tempos limite nos antigos e novos paradigmas do jQuery.

Live Demo

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

Observe que o textStatus param (ou jqXHR.statusText ) permitirá que você sabe qual foi o erro. Isso pode ser útil se você quiser saber se a falha foi causada por um tempo limite.

erro (jqXHR, textStatus, errorThrown)

Uma função a ser chamada se a solicitação falhar. A função recebe três argumentos: O objeto jqXHR (no jQuery 1.4.x, XMLHttpRequest), uma string descrevendo o tipo de erro que ocorreu e um objeto de exceção opcional, se ocorreu. Valores possíveis para o segundo argumento (além de nulo) são "timeout", "error", "abort" e "parsererror". Quando ocorre um erro HTTP, o errorThrown recebe a parte textual do status HTTP, como "Não encontrado" ou "Erro interno do servidor". A partir do jQuery 1.5, a configuração de erro pode aceitar uma matriz de funções. Cada função será chamada por vez. Nota: Esse manipulador não é chamado para solicitações de script e JSONP de domínio cruzado.

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

104
Brandon Boone

Você poderia usar a configuração timeout nas opções do ajax como esta:

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

Leia tudo sobre as opções do ajax aqui: http://api.jquery.com/jQuery.ajax/

Lembre-se de que, quando ocorre um tempo limite, o manipulador error é acionado e não o manipulador success :)

22
Martin Jespersen

use a função jQuery .ajax com todos os recursos. compare com https://stackoverflow.com/a/3543713/1689451 para um exemplo.

sem testar, apenas mesclando seu código com a questão referenciada 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);
        }
    }
});​
2
Rudolf Mühlbauer