ホームページ > ウェブフロントエンド > jsチュートリアル > jQuery Promise を使用して非同期呼び出しをチェーンし、非同期呼び出し間でデータを渡す方法

jQuery Promise を使用して非同期呼び出しをチェーンし、非同期呼び出し間でデータを渡す方法

Linda Hamilton
リリース: 2024-10-30 14:52:02
オリジナル
638 人が閲覧しました

How to Chain Asynchronous Calls and Pass Data Between Them with jQuery Promises?

jQuery Promises を使用した非同期呼び出しのチェーン

jQuery Promise を使用して 3 つの非同期呼び出しをチェーンし、それらの間でデータを渡すにはどうすればよいですか?

連続して実行する必要がある 3 つの HTTP 呼び出しを扱う場合は、jQuery Promise を利用して呼び出しを連鎖させ、データ転送を容易にすることを検討してください。

最初は、2 つの関数に遅延オブジェクトを使用しようとすると、部分的な解決策が得られます。ただし、このアプローチを 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(...);
}</code>
ログイン後にコピー

main 関数内で、関数を次のようにチェーンします。 .then() は次のようになります。

<code class="javascript">function main() {
    first().then(second).then(third);
}</code>
ログイン後にコピー

後続の関数に渡される data、textStatus、および jqXHR 引数は、前の関数の $.ajax() 呼び出しから生じます。これにより、各関数が前の呼び出しの出力にアクセスして利用できるようになります。

説明のために、以下のデモでは、$.ajax(...) の代わりに $.when('foo') を使用して、

<code class="javascript">function main() {
    $.when('foo').then(second).then(third);
}</code>
ログイン後にコピー

この方法で Promise を連鎖させてデータを渡すことにより、3 つの非同期呼び出しを同期的かつ効果的に実行できます。

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート