Nuxt 中具有多个请求的 AsyncData

Question

我正在尝试从两个 API 路由中获取答案，并根据结果显示数据。但是由于某种原因，当我尝试使用超过 1 个 axios 调用时它不起作用，并出现 404/500 错误。

我尝试了以下方法：

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

和

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

每个调用单独工作都很好，但它们不能一起工作。知道这是为什么吗？

Answer 1

你应该像这样await你的Promise.all

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}`),
])

另外，不要忘记第一个 $axios 末尾的 ,。

---

我前段时间给过类似的answer here。

---

PS：如果您想快速解决这些问题，请使用 ESlint。
如果你想了解如何同时拥有 ESlint 和 Prettier 的教程，可以关注我的tutorial here。

Answer 2

所以在我的情况下，为 axios 指出 .then 和 .catch 就足够了

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

一切运行良好。另外我有点误解了 500 错误，我认为这是一条通用消息，但我的 API 只是告诉我找不到该类别。