Nuxt-複数のリクエストを持つasyncData

私のアプリケーションには、売り手がリストした商品を表示する売り手ページがあります。ページに必要なすべてのデータを取得するためにasyncDataを使用しています（SEOに適しています）

asyncData ({params, app, error }) {

    return app.$axios.$get(`/seller/${params.username}`).then(async sellerRes => {

        let [categoriesRes, reviewsRes, productsRes] = await Promise.all([
            app.$axios.$get(`/categories`),
            app.$axios.$get(`/seller/${params.username}/reviews`),
            app.$axios.$get(`/seller/${params.username}/products`)
        ])

        return {
            seller: sellerRes.data,
            metaTitle: sellerRes.data.name,
            categories: categoriesRes.data,
            reviewsSummary: reviewsRes.summary,
            products: productsRes.data,
        }

    }).catch(e => {
        error({ statusCode: 404, message: 'Seller not found' })
    });
},

この方法は意図した仕事をしますが、私はこれを間違っていると思わずにはいられません。

ページに移動すると、nuxtプログレスバーが2回表示されます（これは奇妙です）。

私はしばらくの間、asyncDataで複数のリクエストの例を探して見つけるために検索してきましたが、それほど多くはありません。

多分私はasyncDataで複数のリクエストを呼び出すことになっていますか？

vue.jsvuejs2nuxt.jsnuxt

2019/01/09itsliamoco

Async awaitを使用してみてください。これは、両方のリクエストを並行して実行する方法です。

async asyncData ({ $axios }) {
  const [categoriesRes, articlesRes] = await Promise.all([ 
    $axios.get('/fetch/categories'),
    $axios.get('/fetch/articles'),
  ])

  return {
    categories: categoriesRes.data,
    articles: articlesRes.data,
  }
},

2020/01/17Andrew Savetchuk