3

Tenho um ajax simples parecido com esse:

function ajax() {
    $.ajax({
        url: "../../api/utilitarios/cidades/estado",
        method: 'POST',
        dataType: 'json',
        success: function (data) {
        },
        error: function (data) {
            console.log(data);
        }
    });
}

Ele tem um success e um error, preciso saber quando a requisição do ajax foi concluida e já tá tudo pronto pra ser impresso ?

Atualmente uso um setTimeout dentro do success, mas se demorar mais doq isso vai bugar meu script....

2 Respostas 2

6

O que procuras é o complete. A descrição da documentação é:

A function to be called when the request finishes (after success and error callbacks are executed).

o que quer dizer que essa callback é chamada sempre, depois de eventuais callbacks success e error terem sido executadas.

Podes fazer um teste e aí confirma-se a ordem dos eventos:

function teste(url) {
    var x = 0;
    $.ajax({
        url: url,
        complete: function(response) {
            x++;
            console.log('complete', url, x);
        },
        error: function() {
            x++;
            console.log('error', url, x);
        },
        success: function() {
            x++;
            console.log('success', url, x);
        }
    });
}


teste('http://echo.jsontest.com/insert-key-here/insert-value-here/key/value');
teste('http://jhfgfkjgh.ldflks');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Podes usar o deferred, ao estilo de Promise, como o Gabriel também sugeriu. Mas nesse caso acho que deves usar o always.

  • o .always() quando quiseres saber que o ajax acabou independentemente do resultado

  • o .done() quando quiseres saber que o ajax acabou, com sucesso (que funciona como o success).

Exemplo:

function teste(url) {
    return $.ajax({
        url: url
    });
}


teste('http://echo.jsontest.com/insert-key-here/insert-value-here/key/value').done(function(res) {
    console.log('url válido - done');
}).fail(function(razao) {
    console.log('url válido - catch');
}).always(function() {
    console.log('url válido - always');
});

teste('http://jhfgfkjgh.ldflks').done(function(res) {
    console.log('url inválido - done');
}).fail(function(razao) {
    console.log('url inválido - catch');
}).always(function() {
    console.log('url inválido - always');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

1
  • Na documentação o always executa no sucesso e no erro e o then executa o sucesso,erro e em progresso. por isto acredito que o then seja uma solução mais completa. Commented 18/08/2016 às 11:22
1

Você pode utilizar também os metodos deferred para detectar quando concluiu a sua requisição.

Estes são executados após o complete como um callback, utilizando a mesma base de encadeamento de métodos no jquery. Existem vários um deles é o then. que no caso seria.

"Executou essa requisição, então faça isso em caso de sucesso ou isso em caso de falha".

Exemplo.

var request = function(url, data) {
   return $.ajax({
     type: 'POST',
     url: url,
     data: data,
     dataType: 'json',
     beforeSend: function() {
       $("img").show();
     },
     complete: function() {
       $("img").hide();
     },
     error: function(data) {
       $("div").append(data.statusText);
     }
   });
 };

 // para simular um erro mude a url para  https://baconipsum.com\api/?type=meat-and-filler
 request("https://baconipsum.com/api/?type=meat-and-filler").then(function(data) {
   $("div").append(data); // requisição bem sucedida
 }, function() { // requisição falhou
   alert('falhou');
 });
img {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img src="http://loading.io/assets/img/default-loader.gif">

<div>

</div>

Veja no Jsfiddle

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .