（四）01-异步数据——asyncData⽅法获取异步数据Nuxt.js提供使⽤async。。
。
异步数据——asyncData⽅法获取异步数据 & Nuxt.js提供使⽤ async⽅法获取接⼝数据 & 在线测试接⼝的使⽤Nuxt.js 扩展了 Vue.js，增加了⼀个叫 asyncData 的⽅法，使得我们可以在设置组件的数据之前能异步获取或处理数据。
asyncData ⽅法
asyncData⽅法会在组件（限于页⾯组件）每次加载之前被调⽤。它可以在服务端或路由更新之前被调⽤。 在这个⽅法被调⽤的时候，第⼀个参数被设定为当前页⾯的，你可以利⽤ asyncData⽅法来获取数据，Nuxt.js 会将 asyncData 返回的数据融合组件 data ⽅法返回的数据⼀并返回给当前组件。
注意：由于asyncData⽅法是在组件 初始化 前被调⽤的，所以在⽅法内是没有办法通过 this 来引⽤组件的实例对象。
Nuxt.js 提供了⼏种不同的⽅法来使⽤ asyncData ⽅法，你可以选择⾃⼰熟悉的⼀种来⽤：
1. 返回⼀个 Promise, nuxt.js会等待该Promise被解析之后才会设置组件的数据，从⽽渲染组件.
2. 使⽤ ()
我们使⽤ 重构 HTTP 请求, 我们 强烈建议您 使⽤我们的 ⽤于您的Nuxt项⽬中。
如果您的项⽬中直接使⽤了node_modules中的axios，并且使⽤axios.interceptors添加对请求或响应数据进⾏了处理，确保使⽤ate创建实例后再使⽤。否则多次刷新页⾯请求服务器，服务端渲染会重复添加，导致数据处理错误。
import axios from'axios'
const myaxios = ate({
// ...
})
sponse.use(function(response){
return response.data
},function(error){
// ...
})
测试⽤的接⼝
打开第⼀个⽹址链接：
往下拉点击-选取⽤户user接⼝：
asyncData
Nuxt 中额外增加的 vue ⽣命周期的钩⼦函数
在服务端执⾏，请求是由服务端发送
没有 Vue 实例的 this，this 指向 undefined
把异步获取到的数据，作为对象返回，并合并到data中
路由切换的时候，会在客户端执⾏
使⽤
async asyncData(){
// console.log(this)
const{ data }=('picode/posts')
return{
list: data
}
}
⽰例：
第⼆步：请求接⼝，需要安装axios，在命令⾏中输⼊
npm i axios
第三步：在user/index.vue中导⼊axios，调⽤axios发送请求
import axios from'axios'
export default{
// 异步数据
// 会在组件创建之前执⾏（服务端）
// 路由跳转的时候执⾏（客户端）
// asyncData返回的数据，会融合到组件的data⾥
// asyncData是在组件创建之前执⾏的，所以this⽆法获取到组件对象（this指向undefined）// 负责：在组件创建之前获取异步数据
await和async使用方法
async asyncData(){
console.log('asyncData')//验证 async asyncData ()这句话是在服务端执⾏的//  返回的是⼀个响应对象，⾥⾯有⼀个属性 data ，data是服务器返回的真实数据const{ data }=('
return{
userList: data
}
},
data(){
return{
name:'zs'
}
},
created(){
console.log(this)
}
第四步：在user/index.vue中的div⾥遍历渲染接⼝数据-name
<ul>
<li
v-for="user in userList"
:key="user.id">{{ user.name }}</li>
</ul>
第五步：打开页⾯，查看是否可以 获取接⼝数据-是服务端渲染
注：
如何证明是服务端渲染？
F12打开源代码进⾏检查，如果能看到接⼝数据代码，就证明是服务端渲染
验证
console.log('asyncData')//验证 async asyncData ()这句话是在服务端执⾏的
打开页⾯的控制台，验证服务端渲染，显⽰打印结果
验证路由跳转——客户端执⾏，点击-⽤户详情
// 路由跳转的时候执⾏（客户端）
// asyncData返回的数据，会融合到组件的data⾥
注意：
服务端请求接⼝，在Network⽆法检测到请求；
点击⽤户详情——>点击⾸页——>Network⾥⾯可以获取到请求数据
查看服务端请求接⼝

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。