Nuxt - asyncData avec plusieurs requêtes

Question

Dans ma demande, j'ai une page de vendeur qui affiche les produits répertoriés par ce vendeur. J'utilise asyncData pour obtenir toutes les données requises pour la page (mieux pour le référencement)

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' })
    });
},

Bien que cette méthode fasse le travail prévu, je ne peux pas m'empêcher de penser que je fais mal.

Lorsque vous accédez à la page, la barre de progression nuxt s'affiche deux fois (ce qui est étrange).

Je recherche depuis un certain temps maintenant pour essayer de trouver des exemples de demandes multiples dans asyncData, mais il n'y a pas grand-chose là-bas.

Peut-être que je ne suis pas censé appeler plusieurs demandes dans asyncData?

Answer 1

Essayez d'utiliser async wait, voici comment vous pouvez exécuter les deux requêtes en parallèle:

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

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