jQuery Promises を使用して複数の非同期呼び出しをチェーンする方法?

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

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

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

<code class="javascript">function first() {
    ajax();
}

function second() {
    ajax();
}

function third() {
    ajax();
}

function main() {
    first().then(second).then(third);
}</code>

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

<code class="javascript">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);
});</code>

このコードは部分的な解決策を提供しますが、3 つの関数の連鎖はまだ達成されていません。複数の呼び出しを連鎖させる鍵は、各関数の $.ajax() によって返される jqXHR オブジェクトを返すことにあります。これらのオブジェクトは Promise と互換性があり、.then()/.done()/.fail()/.always() を使用してチェーンできます。

<code class="javascript">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);
}</code>

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

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

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

以上がjQuery Promises を使用して複数の非同期呼び出しをチェーンする方法?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。