Reputation: 1074
I wrote the following action in Nuxt.js.
async fetchAllCategoryPosts({ commit }) {
await this.$axios.$get(`${process.env.apiBaseUrl}/posts/categories`).then(res => {
for (const data of res) {
this.$axios.$get(`${process.env.apiBaseUrl}/posts/categories/${data.category_id}`).then(posts =>{
data['posts'] = posts
})
}
console.log(res)
})
}
The contents of res
of the first request are as follows
[
{ 'category_id': 1 },
{ 'category_id': 4 },
{ 'category_id': 9 },
{ 'category_id': 11 }
]
And, based on the result, I want to send a second request and finally edit res
as follows.
[
{ 'category_id': 1, 'posts': [{object}, {object} ...] },
{ 'category_id': 4 'posts': [{object}, {object} ...] },
{ 'category_id': 9 'posts': [{object}, {object} ...] },
{ 'category_id': 11 'posts': [{object}, {object} ...] }
]
However, with the above code, the result of console.log (res)
has no change with the state of the first request.
How can we respond?
Upvotes: 0
Views: 102
Reputation: 37005
The beauty of async/await is that you can escape the "callback hell" and work with the data as if it was synchronous.
async fetchAllCategoryPosts({ commit }) {
const categories = await this.$axios.$get(`${process.env.apiBaseUrl}/posts/categories`);
const withPosts = await Promise.all(
categories.map( async cat => ({
...cat,
posts: await this.$axios.get(`${process.env.apiBaseUrl}/posts/categories/${cat.category_id}`)
})
);
return withPosts;
};
edit: I did not test this with vue/axios, but it has worked with plain es6 and substituting fetch
for this.$axios.get
.
Upvotes: 1
Reputation: 6005
Try the below code. I could not test this due to lack of environment, but this should work. Do let me know in case of errors
async fetchAllCategoryPosts({ commit }) {
this.$axios.$get(`${process.env.apiBaseUrl}/posts/categories`).then(res => {
let newRes = await Promise.all(res.data.map(async (data) => await this.$axios
.$get(`${process.env.apiBaseUrl}/posts/categories/${data.category_id}`)
.then(posts => ({...data, posts}));
console.log(newRes);
})
}
Upvotes: 1