foreachの中で非同期が終わったら僕の肩を叩いてください

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

次に読むおすすめ記事

Angularでwebアプリを作成する時「コンポーネントのベストプラクティス」

何が面倒って、アイキャッチ画像を設定するほど面倒なことはない

Vue3のベースプロジェクトのコードを統一する

Angularをバージョン指定でインストールする方法は?

react でプロジェクトを作成する

この記事に対するコメント

お気軽にコメントを下さい

メールアドレスが公開されることはありません。 が付いている欄は必須項目です