APIリクエストを並列に捌く【Promise.all】

複数のAPIリクエストを発行して、全部の返答が来るのを待って次の処理にうつる。
そのやり方です。

※こちらの内容は、reduceでasyncする方法はこれ！で
@htsignさんにご指摘いただいたコメントをほとんどそのまま記事にさせていただいております。

Promise.allを使え！

const itemCodeList = [
  '000000001',
  '000000002',
  '000000003',
];

// キモはここ。
const itemList: Item[] = await Promise.all(itemCodeList.map(getItemFromCodeAPI));

// next func.. （有効なものだけに絞るとか）
const validItemList = itemList.filter(item => item.status !== 404);

解説

Promise.allを使うことで、並列に処理を捌くことができるようになります。
参考までに、APIを並列で捌かないよくない例として、私の愚コードを晒します。

const itemCodeList = [
  '000000001',
  '000000002',
  '000000003',
];

const itemList = await itemCodeList.reduce(
  async (accum: Promise<Item[]>, itemCode) => {
    const prev = await accum;

    // APIからの情報を待つ
    const item = await getItemFromCodeAPI(itemCode);

    item && prev.push(item);

    return Promise.resolve(prev);
  }, Promise.resolve([]));

お分かりいただけますでしょうか？

ついさっきまでの自分はreduceの中でどうやってasync/awaitさせるかだけに執着してしまい、
APIリクエストを1つずつこなしていくめちゃくちゃ遅いコードを書いてしまっていたのです。。

木を見て森を見ずってやつですかね、
恥ずかしすぎてまじぴえん。

謝辞

@htsignさん、おかげさまで愚コードをリリースせずにすみました！
わかりやすいご指摘ありがとうございました！