async/await で複数のAPIを非同期に処理する

一つの画面で複数のAPIを叩く時にだいぶ遅くなっていてハマったのでメモ。

最初はだいたい以下のように書いていたのですが、この場合だとrequest1の処理が完了 → request2の処理というように非同期で処理する意味があまりない形になっていました。

async function sample() {
    await request1(arg1);
    await request2(arg2);
}

なんとかならないかと思っていた所、async/awaitはPromiseを返すということがわかったので、Promise.allですべて実行する形にしてすべてが終了してから次の処理に進む形にした所、ある程度早くなりました。

Promise.allのドキュメントは以下。

Promise.all() - 複数のPromise関数を実行し、全ての結果を得る | JavaScriptリファレンス

変更したコードはだいたい以下のような感じ。

async function sample() {
  const reqs = [{
    request: req1
    args: arg1
  },{
    request: req2,
    args: arg2,
  }]

  await Promise.all(reqs.map(req => req.request(req.args)))
}