AsyncData with multiple requests in Nuxt - vue.js

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?

Answer 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.

Answer 2

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.