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?

score 1 · Answer 1 · answered Sep 10 '21 at 12:51

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 '21 at 12:51

kissu

40,416
14
65
133

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. – RedEclipse Sep 10 '21 at 12:54
`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. – kissu Sep 10 '21 at 12:56
Yeah, commas in the place. It returns generic "Request failed with status code 500", I'll enable ESlint asap. – RedEclipse Sep 10 '21 at 12:59
@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. – kissu Sep 10 '21 at 13:07
That what I thought, but API works fine though direct access or using each axios call separately. – RedEclipse Sep 10 '21 at 13:19
Still, if you have a 500, the server will be verbose at some point and give you the matter of what's happening. You could also try to write it with a `fetch` and hardcoded URLs directly in your browser console to see if it's related to Nuxt or if it is more of a server issue not being able to handle 2 requests at the same time @RedEclipse – kissu Sep 10 '21 at 13:23
The thing is when I getting 404(first route) and 500(for second), network tab in dev tools doesn't track any attempts of Nuxt to contact with API, only GET localhost:3000 with 500/404 – RedEclipse Sep 10 '21 at 13:39
@RedEclipse alright, first step is to find out why you do have a 404. :) – kissu Sep 10 '21 at 13:44
@RedEclipse please try to stay focused and edit your OP with all the relevant details. Hard to debug without any code, and especially in comments. – kissu Sep 10 '21 at 14:19
I figured out the prob, Nuxt was trying to get the route from 2 API routes, when one of them responds with 500 it dies itself. I'll post a solution to make this work. Silly me. c: Thanks for your time, it really helped. – RedEclipse Sep 10 '21 at 14:21

score 0 · Answer 2 · answered Sep 11 '21 at 10:34

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 '21 at 10:34

RedEclipse

123
2
11

This will be sequential so. – kissu Sep 11 '21 at 13:48
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? – RedEclipse Sep 11 '21 at 23:22
Do you have a public repo for this? – kissu Sep 13 '21 at 08:57
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 :) – RedEclipse Sep 13 '21 at 11:05

AsyncData with multiple requests in Nuxt

2 Answers2