forEachの非同期処理でつまづいております

Question

Railsで以下のようなAPIを作成しました。
・http://localhost:3000/api/v1/productでProduct（製品）情報を取得できる。
・http://localhost:3000/api/v1/product/PRODUCT_ID/reviewで製品ごとのReview（レビュー）情報を取得できる。

このAPIからNuxt.jsでaxiosを使いデータを取得し、以下のような形のデータに整形したいと思っております。

{
  product_id: 12345,
  created_at: 2020/01/01,
  updated_at: 2020/01/01,
  reviews: [
    { review_id: 1, comment: "レビュー1" },
    { review_id: 2, comment: "レビュー2" },
    ...
  ]
}

そこで以下のようなコードを書いてみたのですが、これだとforEachの処理が終わる前にreturnされてしまい正しいデータが取得できません。

JSの非同期処理についての知識がまだ追いついていないのですが、forEachが終わってからreturnしたい場合はどのように書けばいいのでしょうか？

<script>
export default {
  async asyncData({ app }) {
    const products = await app.$axios.$get('/api/v1/products')

    products.data.forEach((el) => {
      app.$axios.$get('/api/v1/products/' + el.id + '/reviews').then((res) => {
        el.reviews = res.data
      })
    })

    return { products }
  }
}
</script>

Answer 1

async-awaitにforEach的な処理を混ぜたい場合、

• 1つずつ実行したいときは、普通のforループを書いて、中でawaitさせる
• 並列実行のときは、Promiseの配列を作ってPromise.allをawaitさせる

ような方法を使います。

async-awaitでもforEachしたい！ - Qiita

Comments

[Khy]

ご回答ありがとうございます！
for文を使ったところ無事解決致しました！
forEachが使えないと知らなかったため助かりました。ありがとうございました！

Answer 2

forEachではコールバックの戻り値は無視されるので、非同期処理が終わるまで待つといったことができません。forに置き換えが必要になります。

Comments

[Khy]

for文に置き換えたところ解決いたしました、ありがとうございました！