Nuxt.js 扩展了 Vue.js,增加了一个叫 asyncData 的方法,使得我们可以在渲染组件之前异步获取数据。
asyncData 方法会在组件(限于页面组件)每次加载之前被调用。它可以在服务端或路由更新之前被调用。 在这个方法被调用的时候,第一个参数 context 被设定为当前页面的上下文对象,你可以利用 asyncData 方法来获取数据,Nuxt.js 会将 asyncData 返回的数据与 data 方法返回的数据一起合并后返回给当前组件。
调用后台数据接口我们采用 axios 异步发送请求,所以下面我们要先安装它。
- 安装
@nuxtjs/axios
:
Nuxt.js 官方提供了
@nuxtjs/axio
s 模块,此模块中还包含了axios
、@nuxtjs/proxy
模块。其中@nuxtjs/proxy
是解决 Nuxt 中跨域问题,进行代理转发请求。
所以我们只要安装@nuxtjs/axios
即可:
npm install @nuxtjs/axios
- 在
nuxt.config.js
引入@nuxtjs/axios
模块:
modules: [
'@nuxtjs/axios',
],
- 使用
asyncData
方法
(Nuxt.js 提供了几种不同的方法来使用 asyncData方法,下面提供两种方法)
- 方式1: 使用 axios 返回 Promise
<template>
<div class="container">
<h2> 首页标题: {{title}}</h2>
<ul>
<li>标题:{{data.title}}</li>
<li>内容:{{data.content}}</li>
<li>作者:{{data.author}}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
title: '博客文章列表页'
}
},
// 加载组件之前服务端会调用
// 方式1:使用了两个return
asyncData({$axios}) {
return $axios.$get('http://mengxuegu.com:7300/mock/5ea4394b2a2f716419f893be/blogweb/test')
.then(response => {
console.log('response', response)
const data = response.data
return { data }// {data: data}
})
} // head省略
} </script>
- 方式2: 使用 async与await
export default {
// 方式2 请求数据接口 async await
async asyncData( {$axios} ) {
const response = await
$axios.$get('http://xxxxxxx/blog-web/test')
console.log('response', response)
return {data: response.data}
}
}