はじめに

JavaScrip や TypeScript を触っていると避けて通れないのは「非同期処理」です。
よくネット上で見るものは、非同期処理を同期処理のように順番に実行する方法を記載してくれてるものが多いと思います。

こんな感じ。

_.js

async function sample(){
  await axios.get("/api/test1").then(function (response) {
    ...
  });
}

もしこの状態でAPIが複数に増えた場合、処理速度はどんどん伸びてしまいます。

_.js

async function sample(){
  await axios.get("/api/test1").then(function (response) {
    ...
  });

  await axios.get("/api/test2").then(function (response) {
    ...
  });

  ...
}

そうではなく、「/test1」と「/test2」の終わる順番はどうでもよいから、並列で一気に実行してほしい。
というのが今回の目的です。

イメージ

このようなイメージでAPIの並列実行を行いたいということです。

実装

これを可能にするのが「Promise.all」を使うことで可能になります。

_.js

async function sample() {
    const api_array = ["/api/test1", "/api/test2"];
    const response_array = await Promise.all(api_array.map(api => axios.get(api)));

    response_array.map(response => {
        ...
    });
  })
}

自分自身、忘れないように...