ホームページ > ウェブフロントエンド > jsチュートリアル > Promise.all() と複数の await: タイミングの違いが問題になるのはどのような場合ですか?

Promise.all() と複数の await: タイミングの違いが問題になるのはどのような場合ですか?

Mary-Kate Olsen
リリース: 2024-12-05 04:00:11
オリジナル
477 人が閲覧しました

Promise.all() vs. Multiple await: When Do Timing Differences Matter?

Await Promise.all() と複数の Await: タイミングの違い

JavaScript では、Promise.all() を使用して非同期操作を処理できます。 ) または複数の await ステートメント。どちらのメソッドも最終的には複数の Promise が解決するのを待つという同じ目的を果たしますが、それらの間には微妙なタイミングの違いがいくつかあります。

シナリオ 1: Promise.all() を使用する

Promise.all() は、Promise の配列を受け取り、入力された Promise が解決されたかどうかに関係なく、すべての入力 Promise が解決されると結果の配列に解決される単一の Promise を返します。拒否。

例:

const data = await Promise.all([res(3000), res(2000), res(1000)])
ログイン後にコピー
ログイン後にコピー

この例では、Promise.all() メソッドは、3 つの入力 Promise がすべて解決されるまでデータの解決を遅らせます。

シナリオ 2: 複数の await ステートメントの使用

このシナリオでは、複数の await ステートメントは個々の Promise が解決するのを待つために使用されます:

const t1 = task1();
const t2 = task2();

const result1 = await t1;
const result2 = await t2;
ログイン後にコピー

ここで、result1 は task1() が解決するとすぐに解決され、result2 は task2() が解決するとすぐに解決されます。

タイミングの比較

これら 2 つのアプローチの主なタイミングの違いは次のとおりです。 Promise.all() は、すべての入力 Promise が解決されるまで、最終結果の解決を遅らせます。これは、続行する前にすべてのタスクが完了するのを待つことが重要なシナリオでは有利です。

一方、複数の await ステートメントを使用すると、個々のタスクを個別に解決できるため、全体的な完了時間が短縮される可能性があります。 .

例の図

遅延関数を使用してシミュレーションする例を考えてみましょう非同期タスク:

例 1 (Promise.all() の使用):

const data = await Promise.all([res(3000), res(2000), res(1000)])
ログイン後にコピー
ログイン後にコピー

例 2 (複数の await ステートメントの使用):

const t1 = task1();
const t2 = task2();
const t3 = task3();

const result1 = await t1;
const result2 = await t2;
const result3 = await t3;
ログイン後にコピー

In例 1 の Promise.all() メソッドは、3 つのタスクがすべて完了するまでデータの解決を遅らせます (3 秒かかります)。例 #2 では、タスクが個別に解決されるため、result1 は 1 秒後に、result2 は 2 秒後に、result3 は 3 秒後に利用可能になります。

以上がPromise.all() と複数の await: タイミングの違いが問題になるのはどのような場合ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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