Nuxt - 具有多个请求的异步数据

Question

在我的应用程序中，我有一个卖家页面，显示该卖家列出的产品。我正在使用 asyncData 获取页面所需的所有数据（对 SEO 更好）

 asyncData ({params, app, error }) {

    return app.$axios.$get(`/seller/${params.username}`).then(async sellerRes => {

        let [categoriesRes, reviewsRes, productsRes] = await Promise.all([
            app.$axios.$get(`/categories`),
            app.$axios.$get(`/seller/${params.username}/reviews`),
            app.$axios.$get(`/seller/${params.username}/products`)
        ])

        return {
            seller: sellerRes.data,
            metaTitle: sellerRes.data.name,
            categories: categoriesRes.data,
            reviewsSummary: reviewsRes.summary,
            products: productsRes.data,
        }

    }).catch(e => {
        error({ statusCode: 404, message: 'Seller not found' })
    });
},

尽管这种方法可以完成预期的工作，但我还是忍不住认为我做错了。

导航到该页面时，nuxt 进度条显示两次（这很奇怪）。

我一直在寻找一段时间，试图在 asyncData 中找到多个请求的示例，但那里没有太多。

也许我不应该在 asyncData 中调用多个请求？

原文由 itsliamoco 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

尝试使用异步等待，这是您可以并行运行两个请求的方法：

 async asyncData ({ $axios }) {
  const [categoriesRes, articlesRes] = await Promise.all([
    $axios.get('/fetch/categories'),
    $axios.get('/fetch/articles'),
  ])

  return {
    categories: categoriesRes.data,
    articles: articlesRes.data,
  }
},

原文由 Andrew Savetchuk 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

实际上，您可以使用 async await ，它看起来也更干净。

 <template>
  <div class="container">
    <h1>Request 1:</h1>
    <h1>{{ post.title }}</h1>
    <pre>{{ post.body }}</pre>
    <br />
    <h1>Request 2:</h1>
    <h1>{{ todos.title }}</h1>
    <pre>{{ todos.completed }}</pre>
  </div>
</template>

<script>
import axios from "axios";

export default {
  async asyncData({ params }) {
    // We can use async/await ES6 feature
    const posts = await axios.get(
      `https://jsonplaceholder.typicode.com/posts/${params.id}`
    );
    const todos = await axios.get(
      `https://jsonplaceholder.typicode.com/todos/${params.id}`
    );
    return { post: posts.data, todos: todos.data };
  },
  head() {
    return {
      title: this.post.title
    };
  }
};
</script>

这 是它的一个工作沙箱。 （不要忘记为 :id 路由参数添加一个值）

原文由 waleed ali 发布，翻译遵循 CC BY-SA 4.0 许可协议