【JavaScript】AwaitをforEachのループ内で使いたい

niffy
2022-08-26
niffy
2022-08-26

はじめに

こんにちは!
とあるプロダクトの開発中、ループ一周ごとにawaitで処理を待機させる実装を行いたいことがありました。
その際に色々と試行錯誤したので備忘録として記録しておきたいと思います。

実装

当初、forEachを使用して実装したのですが、awaitで処理を待機している様子がありません、、
色々と試してみたのですが、解決せず、、
調べてみると、forEachのコールバックの返り値はundefinedのため、awaitされないようです。
代替手段として、for~ofを使用すると良さそうだったのでそちらで実装しました。

```
for (const value of texts) {
    p value
  await new Promise(s => setTimeout(s, loadingTime))
}
```
こんな感じです。このforをネストしているfunctionをasyncにすることをお忘れなく!
ちなみに、分割代入すればkeyを取ることもできるようです。
今回はkeyがない配列だったので、entries()を使用してindexをkeyとして扱い取得しました。
```
for (const [key, value] of texts.entries()) {
    p key
    p value
  await new Promise(s => setTimeout(s, loadingTime))
}
```

終わりに

以上、基本的なことにはなりますが、新たな気付きでしたので記載させていただきました。
同じ悩みをお持ちの方の助けになれば幸いです!