async/awaitを正しく同期処理/非同期処理でLoopする方法

JSにはLoopする方法が複数あり、async/awaitを使う時にはそれぞれの特性に沿ったものを使わないとハマることになります。
今回はそれに関する簡単なまとめです。

forEachとmapは使ってはダメ

Promise { <pending> }を拝めることになります。
正常なReturnを得られません。

for...inは注意が必要

注意点は下記の通りです。

  • 順序が保証されない
  • 仮変数にはインデックス番号が格納されるので、値と誤解をまねく

つまり、列挙可能オブジェクトでは複雑なことは考えずこれは使わないのが吉です。

Loopを同期処理（つまり逐次処理）にはforまたはfor...ofを使う

// for
for (let i = 0: i < items.length < i ++ ) {
    const data = await getData(items[i]);
});

// for...of
for (let item of items) {
    const data = await getData(item);
}

Loopを非同期処理（つまり並列処理）にはPromise.allを使う

Promise.all(items.map(async item => {
    return await getData(item);
}));

まとめ

逐次処理は式（Expression）で構成されるloopはダメで、文（Statement）で構成されるloopは大丈夫。
並列処理はPromise.allを使う。

Javascript

Posted by YongJin Kim