AsyncData with multiple requests in Nuxt

Question

I'm trying to get the answer from two API routes and depending on the result display the data. But for some reason, when I trying to use more than 1 axios call it doesn't work, failing with 404/500 error.

I've tried following:

<template>
  <div v-if="blogPost">
    <p>post</p>
  </div>
  <div v-else-if="blogCategoryPosts">
    <p>category,posts</p>
  </div>
</template>

<script>
export default {
  async asyncData({ $axios, app, route }) {
    const blogPost = await $axios.get(`${process.env.API_DOMAIN}/api/blog/posts${route.path}`)

    const blogCategoryPosts = await $axios.get(`${process.env.API_DOMAIN}/api/blog/categories${route.path}`)

    return {
      blogPost: blogPost.data,
      blogCategoryPosts: blogCategoryPosts.data,
    }
  },
}
</script>

and

<script>
export default {
  async asyncData({ $axios, app, route}) {
    const [blogPost, blogCategoryPosts] = await Promise.all([
        $axios.get(`${process.env.API_DOMAIN}/api/blog/posts${route.path}`),
        $axios.get(`${process.env.API_DOMAIN}/api/blog/categories${route.path}`),
    ])

    return {
        blogPost: blogPost.data,
        blogCategoryPosts: blogCategoryPosts.data,
    }
  },
}
</script>

Each call works fine separately but together they don't. Any idea why is that?

kissu · Accepted Answer · 2021-09-10 12:51:02Z

1

You should await your Promise.all like this

const [blogPost, blogCategoryPosts] = await Promise.all([
  $axios.get(`${process.env.API_DOMAIN}/api/blog/posts${route.path}`),
  $axios.get(`${process.env.API_DOMAIN}/api/blog/categories${route.path}`),
])

Also, don't forget the , at the end of the first $axios.

I gave a similar answer here few time ago.

PS: if you want to have those issues fixed quickly, use ESlint.
If you want a tutorial on how to have both ESlint and Prettier, you can follow my tutorial here.

answered Sep 10, 2021 at 12:51

kissu

47.3k16 gold badges94 silver badges197 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

RedEclipse Over a year ago

Thank you. I forgot to add `"await"(but it was in my old code)in following example, with it my code don't work anyway.

kissu Over a year ago

my code don't work anyway please be more explicit here, does it gives you an error. Also, you did maybe forgot a , as mentioned above.

RedEclipse Over a year ago

Yeah, commas in the place. It returns generic "Request failed with status code 500", I'll enable ESlint asap.

kissu Over a year ago

@RedEclipse alright, so it's a server issue. Check if there is more details in the Network tab (in your browser devtools), then aim to your backend to check the logs. Probably not a Nuxt issue if everything else is in place.

RedEclipse Over a year ago

That what I thought, but API works fine though direct access or using each axios call separately.

|

RedEclipse · Accepted Answer · 2021-09-11 10:34:00Z

0

So in my case it was sufficient to point on .then and .catch for axios

  export default {
  async asyncData({ $axios, app, route}) {
    
    const blogPost = await $axios.get(`${process.env.API_DOMAIN}/api/blog/posts${route.path}`).then(response => response.data).catch(error => {})

    const blogCategoryPosts = await $axios.get(`${process.env.API_DOMAIN}/api/blog/categories${route.path}`).then(response => response.data).catch(error => {})

    return {
      blogPost: blogPost,
      blogCategoryPosts: blogCategoryPosts,
    }
  },
  }

Everything worked well. Also I sort of misunderstood 500 error, i thought it a generic message, but my API was just telling me that category not found.

answered Sep 11, 2021 at 10:34

RedEclipse

1232 silver badges12 bronze badges

4 Comments

kissu Over a year ago

This will be sequential so.

RedEclipse Over a year ago

Time has shown that it is imperfect. I have an interceptor app-wide for axios(it catches 500 error), so for example it works good if category exists(and not exists, showing 500 error), but when I'm getting a post inside of category, it displays post but throws 500 error(popup) because no category found, how I could prevent that?

kissu Over a year ago

Do you have a public repo for this?

RedEclipse Over a year ago

Not yet, I realized that my approach wasn't good. I wanted to keep all my toasts only in a separate axios.js file(have got interceptors for 500 and other errors here), but when I fetch on one page 2 axios instances it'll always drop the error. So I slightly changed the backend when it couldn't find the category from 500 to 404 and stuff now at least works as it should :)

Collectives™ on Stack Overflow

AsyncData with multiple requests in Nuxt

2 Answers 2

10 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related