JavaScript: async/await をループ処理で使いたい -> Promise.all()でOK！

JavaScriptイテレーションにおいて、ループ処理が完了してから後続の処理を走らせたい場合ってあると思います。async / awaitを利用すれば簡単に行くかと思いきやそうはいかない。ループの完了を待たずに後続へと移ってしまう。これをなんとかする方法です。

まず、ダメな例

await list.map(async (item) => {
  await something() // ajax処理など
})

console.log('DONE')

Promise.all()で解決

Promise.all()を利用して各ループ内の処理が完了してresolveするようにします。
また、ポイントはmapを利用することです。これは、mapは返り値をreturnしてくれるもので、これにより個々のループ処理のresolveを検知することができます。
forEach, for ... ofなどは返り値を持たないメソッドなのでNGです。

await Promise.all(
  list.map(async (item) => {
   await something() // ajax処理など
  })
)
console.log('DONE')

Related Posts