20

De maneira simples, posso escrever uma requisição assíncrona como:

$.ajax({
    url: url,
    dataType: 'json',
    type: 'GET',
    success: function (_user){
        alert (_user)
    }
});

que me alerta o retorno _user. Igualmente, escrevo:

$.ajax({
    url: url,
    dataType: 'json',
    type: 'GET'
}).done(function(_user){
    alert(_user);
});

que alerta precisamente o mesmo resultado. Eu sei que success: function() no primeiro caso é um callback, executado no sucesso da requisição, assim como fail: function() e always: function() são executados conforme os nomes dizem.

Falando em nomes, é possivel inferir que, quando a requisição está pronta (done), o método chainable .done() é executado. Entendo também que o método $.ajax retorna um deferred object, que é exatamente no qual o .done() atua, por isso a diferença na sintaxe entre ele e o success.

De qualquer jeito, apesar do meu exemplo minimalista, na grande maioria dos casos eu não entendo quando usar cada uma das maneiras - seja ela um callback ou o encadamento de mais um método - visto que eu obtenho o resultado esperado em ambas. Eu conheço ainda uma terceira maneira para obter esse resultado, mas ela envolve a diretiva async: false, que acaba fugindo do escopo da pergunta.

Então, em que momento usar .done()? Quando usar o callback success: function()? Gostaria de exemplos práticos e, se possível, exemplos cujo resultado seja diferente quando uma ou outra aproximação é executada.

4
  • 4
    Não serve como resposta mas segue alguma explicação: stackoverflow.com/questions/14754619/…
    – Guerra
    27/07/2016 às 18:11
  • 3
    @Guerra eu já havia lido essa resposta, e ela é excelente. Até pensei em entrar no mérito de resolve na minha questão, mas acho que isso vale uma pergunta completamente diferente. De qualquer maneira, boa referência =) 27/07/2016 às 18:15
  • 3
    Eu desconheço um caso que tenha que utilizar especificamente um deles. E acho que o uso de Promisses, o done(), facilita a leitura do código e faz a linguagem se aproximar mais de OO. 27/07/2016 às 18:37
  • 2
    @LeonardoLeal eu concordo. A aproximação ao OO, ainda mais agora com o ES6 virando a esquina, me agrada bastante, fora que é possível separar as responsabilidades de captura e de manipulação do dado, nesse caso em especial 27/07/2016 às 19:06

3 Respostas 3

15

Os resultados práticos são iguais. A diferença está principalmente no estilo do código.

As promessas (no jQuery, implementadas como deferred objects) são um modelo amplamente utilizado para se lidar com operações assíncronas, em JavaScript e em outras linguagens. Elas facilitam diversos tratamentos sobre operações assíncronas, principalmente quando você precisa lidar com o resultado de mais de uma operação, seja em sequência ou em paralelo.

Pense por exemplo numa cadeia de operações assíncronas onde cada operação depende do resultado da anterior, com o callback da primeira operação iniciando a segunda e assim por diante. Isso rapidamente se torna um "inferno de callbacks" (callback hell). A consequência típica é que o código fica menos legível, parecendo uma seta para a direita:

callback hell

Isso é muito comum de ocorrer com ifs também, mas no caso deles, que são todos síncronos, é mais simples resolver, muitas vezes bastando colocá-los em sequência em vez de aninhados, ou juntar múltiplas condições num único if.

Já para resolver esse problema com operações assíncronas não é tão simples. É preciso tomar conta do estado dessas operações, que muda ao longo do tempo, e criar um mecanismo para registrar o que fazer dependendo do estado.

E basicamente é isso que as promessas fazem, permitindo transformar o código da figura em algo assim:

a().then(b).then(c).then(d).then(e).then(f);

Outro exemplo, desta vez com jQuery, executando um callback apenas quando 3 requisições ajax tiverem sido completadas:

$.when(reqA, reqB, reqC).then(callback);

Claro que é possível criar suas próprias soluções para resolver os problemas de legibilidade versus assincronicidade, mas as promessas já fazem isso e de modo padronizado – ou seja, que módulos independentes de código são capazes de entender. Lembre-se de que operações assíncronas não se resumem a requisições HTTP. No jQuery, por exemplo, também é possível obter promessas outros tipos, como animações completadas, diálogos modais confirmados, etc. E com essas promessas você consegue expressar de maneira mais simples o fluxo de operações que seu código executa. Em Node.js (portanto, no servidor), o callback hell é ainda mais fácil de se atingir, considerando que operações essenciais como acesso a banco de dados ou ao sistema de arquivos são assíncronas.

2
  • 2
    "Isso é muito comum de ocorrer com ifs também, mas no caso deles, que são todos síncronos, é mais simples resolver" - excelente exemplo
    – Sergio
    27/07/2016 às 22:30
  • Excelente! Gostei da citação ao node.js. + 1 27/07/2016 às 22:44
12

TL;DR: o .done() é a maneira moderna de usar o success, e cumpre mais ou menos(*) as especificações de uma Promise. O que quer dizer que pode ser encadeado ao estilo jQuery e protege a execução em caso de erros.


Antes de o conceito de Promises e callbacks deferidos surgir o método habitual era passar um objeto ao método ajax com as configurações necessárias. Assim a callback ia nesse objeto também assim como o futuro código que dependesse dessa resposta, que tinha de começar de dentro da callback:

$.ajax({
    url: url,
    dataType: 'json',
    type: 'GET',
    success: function (_user){
        fazerUpdateTabela(_user);
        guardarUmCookie(_user);
        procurarNoutraAPIqqCoisa(_user.nif, function(dadosPessoais){
            verificarCartao(dadosPessoais.nrCartao, function(ver){
                if (!ver) fazerTudoDeNovo();
                // etc
            });
        });
        // etc
    }
});

No caso de por exemplo procurarNoutraAPIqqCoisa tivesse lá dentro outro passo a seguir depois desse ter completado a cadeia de acções fica fragmentada e passadas algumas linhas já é dificil saber a origem e direção de execussão do código.

Mais tarde, com o conceito de Promises é possivel escrever código que é um esqueleto do que vai acontecer e tem um caminho mais visual e fácil de perceber. O exemplo acima poderia ser adaptado (com alguns ajustes internos nas funções) para isto:

var ajax = $.ajax({
    url: url,
    dataType: 'json',
    type: 'GET'
});
ajax
    .done([guardarUmCookie, fazerUpdateTabela])
    .done(procurarNoutraAPIqqCoisa.then(verificarCartao).fail(fazerTudoDeNovo));

* - O jQuery tem tido problemas com encadeamentos de deferreds jQuery. Há um bug/pr com uma discussão longa sobre isso no Github. Parece que na versão 3 isso vai ser resolvido mas a meu ver tarde demais pois os browsers já permitem uma versão nativa da mesma ideia.

A versão moderna é portanto mais versátil e permite como referi o encadeamento de funções que devem correr quando a resposta do servidor chegar. Permite funções como argumento mas também arrays de funções, ao estilo do Promise.all, o que pode ser prático.

Esta versão tem uma API paralela ás promises para encaminhar essas cadeias de .done() e .fail()` com vários métodos, dando mais flexibilidade para gerir o fluxo da aplicação.

Um outro aspeto importante das Promises é que os erros gerados dentro de Promises não fazem estragos como antigamente. Um erro ('throw') dentro de uma Promise faz ela e as seguintes da cadeia serem rejeitadaa e chama o .catch() da cadeia. Isto é muito útil para evitar código que deixa de funcionar.

Depois do que escrevi em cima e retornando à pergunta: Qual usar?

Eu prefiro usar Promises e Ajax nativo. Hoje em dia isso já é possivel.

Assim a versão "normal" com callbacks podia ser:

function _ajax(method, url, done) {
  var xhr = new XMLHttpRequest();
  xhr.open(method, url);
  xhr.onload = function () {
    done(null, xhr.response);
  };
  xhr.onerror = function () {
    done(xhr.response);
  };
  xhr.send();
}

// e para usar
_ajax('GET', 'http://example.com', function (err, dados) {
  if (err) { console.log(err); }
  else console.log('A resposta é:', dados);
});

A versão com Promises poderia ser assim um encapsulamento desta versão antiga, com poderes Promise:

function ajax(method, url) {
    return new Promise(function(resolve, reject) {
        _ajax(method, url, function(err, res) {
            if (err) reject(err);
            else resolve(res);
        });
    });
}

ou refazendo:

function _ajax(method, url) {
    return new Promise(function (resolve, reject) {
        var xhr = new XMLHttpRequest();
        xhr.open(method, url);
        xhr.onload = resolve;
        xhr.onerror = reject;
        xhr.send();
    });
}

e depois usar com:

ajax('GET', 'http://sopt.moon')
    .then(function(dados) {
        console.log(dados);
    }).catch(function(err) {
        console.error('Oh não!!', err.statusText);
    });

Com mais algumas adaptações pode permitir POST, PUT, etc. Há um polyfill completo na MDN para isto.


2
  • 1
    Gostei do exemplo vanilla, bem útil! 28/07/2016 às 0:17
  • 1
    Vou marcar essa resposta como a correta, por conta do exemplo com JS puro, apesar de todas as que apareceram serem muito boas e didáticas. 28/07/2016 às 11:43
8

Isso sempre foi um grande paradigma pra mim também. Já pesquisei sobre e vou dizer o que pude absorver.

No início usava-se sempre o callback success falando em $.ajax. Porém quando veio a implementação do $.Deferreds, que seriam retornos com mais rendimentos, passou a usar-se done para callback positivo.

Comparação de callback positivo:

Antes do $.Deferreds

$.ajax({
  url: 'url.php',
  type: 'POST'
  success: function(data) {
      alert("SUCESSO"); 
  }
});

Depois do $.Deferreds

$.ajax({
  url: 'url.php',
  type: 'POST'
}).done(function() { 
     alert("SUCESSO"); 
});

Pelo que pude perceber a principal vantagem em utilizar $.Deferreds é que você pode ter uma função em comum para requisições diferentes.
Isso pode ser explicado de uma forma bem simplista:

function ajax_get_somethings(id) {

  return $.ajax({
    url: get_somethings.php,
    type: 'GET',
    data: {id: id},
    dataType: 'json'
  }).always(function() {
    // Sempre de um alerta
  })
  .fail(function() {
    // Caso falhe solicite outro id
  });

}

ajax_get_somethings(1).done(function(data) {
  // pegue algo com esse id e faça determinada tarefa
});

ajax_get_somethings(2).done(function(data) {
  // pegue algo com esse outro id e faça outra tarefa
});

E isso não acaba por ai ainda temos uma série de leques a ser explorado caso for necessário: https://api.jquery.com/category/deferred-object/

Espero ter ajudado.

Referência de pergunta: https://stackoverflow.com/questions/8840257/jquery-ajax-handling-continue-responses-success-vs-done

2
  • Complementando, a separação do que realmente é esperado é mais visível aos olhos do programador: O que tem que fazer quando dá certo, o que tem que fazer quando dá errado. Só acho uma falha (ou falta de implementação) que o fail() não receba parâmetros, como status_code, por exemplo. 27/07/2016 às 20:54
  • 1
    Esta aproximação de parametrizar a requisição é bem interessante. Por ora, +1 27/07/2016 às 20:58

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 .