zukucode
主にWEB関連の情報を技術メモとして発信しています。

JavaScript 非同期処理をループで実行する

JavaScriptで非同期処理をループ処理で実行する方法を紹介します。

直列実行

以下の例はasyncSampleファンクションの処理をループ処理で直列で順番に実行します。

const arr = [1, 2, 3, 4, 5];

for (const value of arr) {
  await asyncSample(value);
}

console.log('完了');

非同期実行

上記の例だと、直列で実行するため1つ1つの処理の完了を待つことになります。

処理を順番に行う必要がある場合には上記のように実行する必要がありますが、処理の完了を待たずに非同期ですべてのasyncSampleファンクションを実行する場合は以下のようにします。

const arr = [1, 2, 3, 4, 5];

await Promise.all(
  arr.map(async value => {
    await asyncSample(value);
  });
);

console.log('完了');

forEachでは動作しませんのでmapを使用するのがポイントです。

await Promise.allを使用すると、ループ処理がすべて完了するまで待機します。


関連記事