asyncData多个数据请求
时间: 2024-06-08 20:10:48 浏览: 128
Egg Vue SSR 服务端渲染数据请求与asyncData
在 Nuxt.js 中,可以在页面组件中使用 `asyncData` 方法来获取异步数据。如果需要获取多个数据,可以使用 `Promise.all` 方法将多个异步请求并行执行。以下是一个示例代码:
```javascript
export default {
async asyncData({ $axios }) {
const [userData, postsData] = await Promise.all([
$axios.$get('https://api.example.com/user'),
$axios.$get('https://api.example.com/posts')
])
return {
user: userData,
posts: postsData
}
}
}
```
在上面的示例中,我们使用了 `$axios` 来发送异步请求,使用 `Promise.all` 方法将多个异步请求并行执行,最终将获取到的数据返回给页面组件。在返回的数据中,我们将用户数据存储在 `user` 变量中,将文章数据存储在 `posts` 变量中。这样,在页面组件中就可以通过 `this.$data.user` 和 `this.$data.posts` 来访问获取到的数据了。
阅读全文