jQuery Promises を使用した 3 つの非同期呼び出しの連鎖

非同期プログラミングでは、API またはサーバーに対して複数の呼び出しを連続して行うのが一般的です。これらの呼び出しを効率的に処理するには、呼び出しをチェーンして、次の呼び出しが実行される前に各呼び出しが確実に完了するようにすることが望ましいです。 jQuery Promise を使用すると、この連鎖プロセスを簡単に実行できます。

次のシナリオを考えてみましょう。3 つの HTTP 呼び出しを順番に行う必要があり、データを 1 つの呼び出しから別の呼び出しに渡す必要があります。

function first() {
    ajax();
}

function second() {
    ajax();
}

function third() {
    ajax();
}

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

この例では、最初の呼び出しを行い、それが完了するまで待機し、その後、最初の呼び出しの結果を使用して 2 回目の呼び出しを行い、最後に、その結​​果を使用して 3 回目の呼び出しを行うことを目的としています。 2回目の電話。ただし、このコードは期待どおりに機能しません。これらの呼び出しを正しく連鎖させるには、jQuery Promise を適切に使用する必要があります。

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

このコードは部分的な解決策を提供しますが、3 つの関数の連鎖はまだ達成されていません。複数の呼び出しを連鎖させる鍵は、各関数の $.ajax() によって返される jqXHR オブジェクトを返すことにあります。これらのオブジェクトは 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);
}

この改訂されたコードでは、各 $.ajax() 呼び出しによって返される jqXHR オブジェクトは、それぞれの関数の Promise を表します。これにより、ある関数の出力が入力として次の関数に渡され、関数を順番に連鎖させることができます。

引数 data、textStatus、および jqXHR は、前の関数の $.ajax() 呼び出しから生成されます。 。たとえば、first() は Second() にフィードし、Second() は third() にフィードして、関連するデータを渡します。

このチェーンの動作を確認するには、$.when('foo' を使用したライブ デモンストレーションをご覧ください) ) 履行された約束を提供する方法を以下に示します。