Объединение трех асинхронных вызовов с помощью обещаний jQuery

В асинхронном программировании обычно выполняется несколько последовательных вызовов API или сервера. Чтобы эффективно обрабатывать эти вызовы, желательно объединить их в цепочку, гарантируя, что каждый вызов будет завершен до выполнения следующего. С помощью обещаний jQuery этот процесс объединения в цепочку можно легко осуществить.

Рассмотрим следующий сценарий, в котором необходимо выполнить три HTTP-вызова последовательно и передать данные от одного вызова к другому:

function first() {
    ajax();
}

function second() {
    ajax();
}

function third() {
    ajax();
}

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

В этом примере намерение состоит в том, чтобы выполнить первый вызов, дождаться его завершения, затем выполнить второй вызов, используя результат первого вызова, и, наконец, сделать третий вызов, используя результат второй звонок. Однако этот код не будет работать должным образом. Чтобы правильно связать эти вызовы, необходимо правильно использовать обещания 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);
});

Этот код обеспечивает частичное решение, но цепочка для трех функций все еще не достигнута. Ключом к объединению нескольких вызовов является возврат объекта jqXHR, возвращаемого $.ajax(), в каждой функции. Эти объекты совместимы с Promise и могут быть объединены в цепочку с помощью .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);
}

В этом исправленном коде объект jqXHR, возвращаемый каждым вызовом $.ajax(), представляет собой обещание соответствующей функции. Это позволяет последовательно объединять функции, при этом выходные данные одной функции передаются в качестве входных данных для следующей.

Аргументы data, textStatus и jqXHR возникают в результате вызова $.ajax() в предыдущей функции. . Например, first() передает информацию второй(), а секунда() передает третью(), передавая все необходимые данные.

Чтобы увидеть эту цепочку в действии, можно провести живую демонстрацию с использованием $.when('foo' ) для выполнения выполненного обещания, указано ниже.