JavaScript　複数の非同期処理のいずれかが完了したら処理を実行する方法

JavaScriptで複数の非同期処理のいずれかが完了したら処理を実行する方法について解説します。

複数の非同期処理を同時に実行して、どれか一つが完了したら処理を続行するにはどうすればよいですか？

Promise.raceを使うことで、複数の非同期処理のうち最初に完了したものを選択し、処理を続行することができます。

Promise.raceを使って複数の非同期処理を管理する方法

非同期処理を実行するためにPromiseオブジェクトを使用します。

　Promise.raceは、複数のPromiseオブジェクトを受け取り、最初に完了したPromiseオブジェクトを選択します。
これにより、複数の非同期処理のうち最初に完了したものを取得し処理を続行することができます。

Promise.race(監視するPromiseオブジェクトの配列)

Promise.raceを使用するためには、Promiseオブジェクトを作成しそれらをPromise.raceに渡します。

　Promise.raceは、配列として複数のPromiseオブジェクトを受け取ります。最初に完了したPromiseオブジェクトは、thenメソッドによって取得できます。

例えば、以下のように複数のAPIを呼び出し、最初に完了したAPIのレスポンスを取得することができます。

Promise.race([
  fetch('/api1'),
  fetch('/api2'),
  fetch('/api3')
]).then(response => {
  // 最初に完了したAPIのレスポンスを処理
});

　上記のサンプルでは、fetch関数を使って3つのAPIを非同期で呼び出しています。Promise.raceを使って、最初に完了したAPIのレスポンスを取得し、処理を続行しています。

　Promise.raceは最初に完了したPromiseオブジェクトを選択するため、完了しないPromiseオブジェクトは無視されます。また、Promise.raceは最初にエラーが発生した場合もそれを選択します。

　Promise.race()は、非同期処理が競争状態である場合に有用です。例えば複数のAPIを呼び出し、最初に返されたデータを使用するといった場合に有効です。

また、タイムアウト処理を実装するためにも使用することができます。

リスキリングでキャリアアップしてみませんか？

リスキリング(学び直し)は、経済産業省が推奨しており、

今だけ、最大７０％のキャッシュバックを受けることができます。

最大70％の給付金が出るおすすめのプログラミングスクール！

リスキリングで給付金が出るスクールを７つ紹介 ≫

国策で予算が決められているため申し込みが多い場合は早期に終了する可能性があります！

興味のある方はすぐに確認しましょう。

まとめ

「複数の非同期処理のいずれかが完了したら処理を実行する方法」について以下にまとめます。

Promise.raceを使うことで、複数の非同期処理を同時に実行して、最初に完了したものを選ぶことができるのは非常に便利だと感じました！

非同期処理はJavaScriptの開発において重要な部分です。ぜひ、Promise.raceを使いこなせるようになりましょう！