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
したい場合はどのように書けばいいのでしょうか?
js
1<script> 2export default { 3 async asyncData({ app }) { 4 const products = await app.$axios.$get('/api/v1/products') 5 6 products.data.forEach((el) => { 7 app.$axios.$get('/api/v1/products/' + el.id + '/reviews').then((res) => { 8 el.reviews = res.data 9 }) 10 }) 11 12 return { products } 13 } 14} 15</script>
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/01/02 10:59