# foreachの中で非同期が終わったら僕の肩を叩いてください
2 min read
まずはAPIで色々配列を取得しました。
そのuuidを使って取得したいAPIがあるので、foreachで回してデータを加工しようと思ったがうまくいきませんでした。
という事象にひどく悩まされた。
例えば、こんなコードを実行してみた。
const array = [1, 2, 3, 4, 5]array.forEach(el => { window.setTimeout(() => { console.log(el) }, 1000)});console.log('forEach完了')
// forEach完了// 1// 2// 3// 4// 5上記のコードを実行すると、コメントアウトのようになる。
いや、違う違う、4が出た後に「forEach完了」が欲しい。
じゃあ、どうするか？
のように実行することでコメントアウトのように、つまり臨んだ結果になった。
const array_2 = [1, 2, 3, 4, 5]var Promises = []
array_2.forEach(el => { Promises.push( new Promise((resolve) => { window.setTimeout(() => { console.log(el) resolve() }, 1000) }) )});
console.log('forEach完了！')
Promise.all(Promises) .then(() => { console.log('forEach(中の非同期処理も含めて)完了！') })
// 1// 2// 3// 4// 5// forEach(中の非同期処理も含めて)完了！