Nuxt-具有多个请求的asyncData

vue.js Vue.js

宝儿

2020-03-23

在我的应用程序中,我有一个卖方页面,其中显示该卖方列出的产品。我正在使用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中调用多个请求?

第2867篇《Nuxt-具有多个请求的asyncData》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

1个回答
小宇宙猿 2020.03.23

实际上,您也可以使用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路由参数添加值

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android