Как обновить содержимое первого ответа с помощью axios на основе второго ответа

Question

Я написал следующее действие в 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) не изменяется с состояниемпервый запросКак мы можем ответить?

Answer 1

Прелесть 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;
};

edit: я не проверял это с помощью vue / axios, но он работал с обычным es6 и заменял fetch на this.$axios.get.

Answer 2

Попробуйте приведенный ниже код.Я не мог проверить это из-за нехватки окружающей среды, но это должно работать.Дайте мне знать в случае ошибок

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