时间戳

首页 > 解决方案 > 如何根据第二个响应用axios更新第一个响应的内容

javascript - 如何根据第二个响应用axios更新第一个响应的内容

问题描述

我在 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)
  })
}

第一个请求的内容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} ...] }
]

但是，使用上面的代码，结果console.log (res)并没有随着第一个请求的状态而改变。我们该如何回应？

标签： javascriptvue.jsaxios

解决方案

试试下面的代码。由于缺乏环境，我无法对此进行测试，但这应该可以。如果出现错误，请告诉我


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

推荐阅读