Question

我在Nuxt.js中编写了以下操作。

broadcasMessage

第一个请求的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) }) }的内容如下

res

然后，根据结果，我要发送第二个请求，并最终如下编辑[ { 'category_id': 1 }, { 'category_id': 4 }, { 'category_id': 9 }, { 'category_id': 11 } ]。

res

但是，使用上面的代码，[ { 'category_id': 1, 'posts': [{object}, {object} ...] }, { 'category_id': 4 'posts': [{object}, {object} ...] }, { 'category_id': 9 'posts': [{object}, {object} ...] }, { 'category_id': 11 'posts': [{object}, {object} ...] } ]的结果与第一个请求的状态没有变化。我们该如何回应？

Answer 1

尝试以下代码。由于缺乏环境，我无法对此进行测试，但这应该可以工作。如果发生错误，请告诉我


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);
  })
}

Answer 2

async / await的优点在于您可以逃脱“回调地狱”，并像处理同步数据一样处理数据。

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;
};

编辑：我没有使用vue / axios对此进行测试，但是它已经在纯es6中工作，并且用fetch代替了this.$axios.get。

如何基于第二个响应使用axios更新第一个响应的内容

2 个答案: