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(中の非同期処理も含めて)完了！