How to send multiple requests parallelly in fetch hook - Nuxt

Let's declare a method to fetch data from multiple endpoint.

methods:{
// rest of your methods 
async fetchData(){
     let [res1, res2, res3] = await Promise.all(
         this.$axios.$get('api/endpoint/1'),
         this.$axios.$get('api/endpoint/2'),
         this.$axios.$get('api/endpoint/3'),
         )
     // check your response and whatever you want with those response
     console.log(res1)
     console.log(res2)
     console.log(res3)
}

Then you can call this method in fetch hook -

async fetch(){
      await this.fetchData()
}

Thank you

😎 Read more -

• https://dev.to/siumhossain/how-to-implement-an-infinite-scroll-with-vue-and-nuxt-4d6k
• https://dev.to/siumhossain/generating-sitemap-xml-for-static-and-dynamic-from-multiple-api-endpoint-in-nuxt-js-2cij
• https://dev.to/siumhossain/vue-nuxt-remove-html-tags-from-rendered-text-for-seo-5e47
• https://dev.to/siumhossain/set-up-deploy-nuxtjs-web-application-on-ubuntu-2204-lts-2gm0
• https://dev.to/siumhossain/shortnote-redirect-and-catch-errors-in-fetch-hook-nuxt-ssr-33k2
• https://dev.to/siumhossain/how-to-detect-scroll-up-and-scroll-down-in-nuxtvue-4a3m
• https://dev.to/siumhossain/error-system-limit-for-number-of-file-watchers-reached-in-nuxt-5g2d

Comments

[agent_privatbanka]

Promise.all([...])