Encadeando três chamadas assíncronas com promessas do jQuery

Na programação assíncrona, é comum fazer várias chamadas para uma API ou servidor em sucessão. Para lidar com essas chamadas de forma eficiente, é desejável encadeá-las, garantindo que cada chamada seja concluída antes que a próxima seja executada. Com as promessas do jQuery, esse processo de encadeamento pode ser realizado com facilidade.

Considere o seguinte cenário, onde três chamadas HTTP precisam ser feitas em sequência e os dados precisam ser passados ​​de uma chamada para outra:

function first() {
    ajax();
}

function second() {
    ajax();
}

function third() {
    ajax();
}

function main() {
    first().then(second).then(third);
}

Neste exemplo, a intenção é fazer uma primeira chamada, esperar que ela termine, depois fazer uma segunda chamada usando o resultado da primeira chamada e finalmente fazer uma terceira chamada usando o resultado do segunda chamada. No entanto, este código não funcionará conforme o esperado. Para encadear corretamente essas chamadas, é necessário o uso adequado das promessas do jQuery.

function first() {
    var deferred = $.Deferred();
    $.ajax({
        "success": function(resp) {
            deferred.resolve(resp);
        },
    });
    return deferred.promise();
}

function second(foo) {
    $.ajax({
        "success": function(resp) {
            // do something with the resp
        },
        "error": function(resp) {
            // handle the error
        },
    });
}

first().then(function(foo) {
    second(foo);
});

Este código fornece uma solução parcial, mas o encadeamento para três funções ainda não foi alcançado. A chave para encadear múltiplas chamadas está em retornar o objeto jqXHR retornado por $.ajax() em cada função. Esses objetos são compatíveis com Promise e podem ser encadeados usando .then()/.done()/.fail()/.always().

function first() {
    return $.ajax(...);
}

function second(data, textStatus, jqXHR) {
    return $.ajax(...);
}

function third(data, textStatus, jqXHR) {
    return $.ajax(...);
}

function main() {
    first().then(second).then(third);
}

Neste código revisado, o objeto jqXHR retornado por cada chamada $.ajax() representa a promessa da respectiva função. Isso permite que as funções sejam encadeadas sequencialmente, com a saída de uma função sendo passada como entrada para a próxima.

Os argumentos data, textStatus e jqXHR surgem da chamada $.ajax() na função anterior . Por exemplo, primeiro() alimenta segundo() e segundo() alimenta terceiro(), passando quaisquer dados relevantes.

Para ver esse encadeamento em ação, uma demonstração ao vivo usando $.when('foo' ) para cumprir uma promessa cumprida é fornecido abaixo.