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

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

虽然这种方法达到了预期的效果，但我还是忍不住认为我做错了

导航到页面时，nuxt进度条显示两次（这是奇数）

我已经搜索了一段时间，试图在asyncData中找到多个请求的示例，但是没有太多

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

也许是这样

asyncData ({params, app, error }) {

    return app.$axios.$get(`/seller/${params.username}`).then(sellerRes => {
        return Promise.all([
            app.$axios.$get(`/categories`),
            app.$axios.$get(`/seller/${params.username}/reviews`),
            app.$axios.$get(`/seller/${params.username}/products`)
        ]).then((categoriesRes, reviewsRes, productsRes) => {
            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' })
    });

},

这是一连串的承诺。第一个承诺尝试获取有关卖方的信息，如果请求成功，则会创建一个新请求，等待其余信息

---

方法

asyncData

将等待所有承诺完成并返回调用结果。

实际上，您可以使用

asyncwait

，它看起来也更干净

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

请求1：
{{post.title}}
{{post.body}}


请求2：
{{todos.title}}
{{todos.completed}}
从“axios”导入axios；
导出默认值{
异步数据（{params}）{
//我们可以使用异步/等待ES6特性
const posts=等待axios.get(
`https://jsonplaceholder.typicode.com/posts/${params.id}`
);
const todos=等待axios.get(
`https://jsonplaceholder.typicode.com/todos/${params.id}`
);
返回{post:posts.data，todos:todos.data}；
},
总目（）{
返回{
标题：this.post.title
};
}
};

---

是它的一个工作沙箱。（不要忘了为

：id

路由参数添加一个值）

尝试使用async await，这是并行运行两个请求的方法：

---

您是否尝试过等待应用程序。$axis.$get而不是返回它？它可以工作，但同步-检查下面Andrew Savetchuk的答案，如果您想并行运行它，当其中一个请求失败时，它会抛出

“数据”未定义

，我认为这个答案值得采用。这是一个非常酷的示例。我在想我是并行执行请求的，但不是……这就是方法！非常感谢！如果其中一个请求失败怎么办？怎么抓住它？

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

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

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