reduceでasyncする方法はこれ！

reduceのなかでasyncをしたい時の書き方がわかんなくて時間くっちゃったのでメモ。

答えはこれだ！！

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

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

    // APIとかから情報引っ張ってくるの待つ
    const item = await getItemFromCode(itemCode);

    item && prev.push(item);

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

答えが分かっちゃえば、あーなるほどねってなられる方多いかと。

追記
コメントでご指摘いただいて、上のようなAPIの返答を待って、次のAPIを実行して...
だと全然遅いことがわかりました。
APIを並列に捌きたい方はこちらを参考にしてください。

軽い解説

解説というほどでもないんですけど、ミソはPromiseをうまく使うことです。
・returnがPromise.resolve(hoge)
・初期値はPromise.resolve([])
の２つかな。

TypeScript使ってる場合は
・溜まってくaccumの型はPromise<Hoge[]>になりますね。

感想

時間取られちゃった原因はPromiseの理解不足かな...
reduceの初期値がPromise.resolve([])になるってなかなか気づけませんでした。><

参考