foreachの中で非同期が終わったら僕の肩を叩いてください
投稿日：2022年05月20日
foreachと非同期を仲良くさせることに成功した。
目次
まずは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(中の非同期処理も含めて)完了！
次に読むおすすめ記事
何が面倒って、アイキャッチ画像を設定するほど面倒なことはない
JavaScriptの配列で重複したものを削除し、ユニークな配列を作成する
この記事に対するコメント