[JavaScript] 複数の非同期処理の完了後に何かしたい場合

どちらが先に終わるかわからない。

同時に始めた非同期通信はどちらかが先に終わるかわからない。
たとえば同じ関数内で非同期通信を同時に始めて、両方のレスポンスが終わったら何かしたい、というケースはよくあると思う。

その場合、自分は下記のように、responseがOKでなかったらreturnする処理をそれぞれの通信に書いていた。

    if (!response.ok) {
      console.error("エラー:", response);
      return;
    }
    // これを非同期通信の数だけ書く

しかし、もっともパフォーマンスがよいのは、Promise.all かもしれない。

Promise.all

async function waitMultiple() {
  const promises = [
    wait(3), // 非同期A
    wait(5)  // 非同期B
  ];
  const messages = await Promise.all(promises);
  console.log(messages); // 必ず5秒後に呼ばれる。
}
waitMultiple(); 

通信をpromisesに配列としてまとめて、それを Promise.all()関数の引数に入れている。これで確実に二つが終わったあとの処理となる。

入れ子にもできる。しかしそれはコールバック地獄の再来である。
PromiseやAsyncを作ってくれた人たちに対する冒涜かもしれない。

つまり、書きかたによってはコード全体の見通しが悪くなるかもしれない。
構成は要検討です。

JSの非同期は難しすぎる。想像の3倍難しい。