ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript で複数の非同期操作を同時に実行するにはどうすればよいですか?

JavaScript で複数の非同期操作を同時に実行するにはどうすればよいですか?

Patricia Arquette
Patricia Arquetteオリジナル
2024-12-07 22:41:171031ブラウズ

How Can I Run Multiple Async Operations Concurrently in JavaScript?

複数の非同期操作の同時実行

問題:

以下のコードでは、非同期操作は順番に実行されます。 concurrently:

const value1 = await getValue1Async();
const value2 = await getValue2Async();

操作を同時に実行するには、コードを変更する必要があります。

解決策:

TL;DR

順次 await の代わりに Promise.all を使用するパターン:

const [value1, value2] = await Promise.all([getValue1Async(), getValue2Async()]);

詳細:

元のソリューションは 2 つの操作を並行して実行しますが、最初の操作が完了するのを待ってから 2 番目の操作を待機します。 1 つの操作に他の操作よりも大幅に時間がかかる場合、パフォーマンスの問題が発生する可能性があります。

Promise.all を使用すると、複数の操作が同時に完了するのを待つことができます。 Promise の配列を受け取り、元の配列と同じ順序で結果の配列に解決される Promise を返します。

Promise.all の利点:

  • 操作の同時実行
  • いずれかの Promise がある場合、拒否を適切に処理します拒否
  • より簡潔なコード

注意:

最初の Promise が解決される前に 2 番目の Promise が拒否された場合、「 「約束してからそれを待つ」パターンでは、「未処理の拒否」エラーが発生する可能性があります。これは Promise.all を使用することで回避できます。

例:

Promise.all を使用した修正された例は次のとおりです:

const getValue1Async = () => {
  return new Promise(resolve => {
    setTimeout(resolve, 500, "value1");
  });
};

const getValue2Async = () => {
  return new Promise((resolve, reject) => {
    setTimeout(reject, 100, "error");
  });
};

(async () => {
  try {
    console.time("Promise.all");
    const [value1, value2] = await Promise.all([getValue1Async(), getValue2Async()]);
  } catch (e) {
    console.timeEnd("Promise.all", e);
  }
})();

このコードPromise.all は、2 つの非同期操作の同時実行を可能にし、完了を高速化する方法を示しています。

以上がJavaScript で複数の非同期操作を同時に実行するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。