本帖最后由 谷粒姐姐 于 2019-5-28 15:10 编辑
3.6 获取数据
3.6.1 asyncData 方法
Nuxt.js 扩展了 Vue.js，增加了一个叫 asyncData 的方法， asyncData 方法会在组件（限于页面组件）每次加载 之前被调用。它可以在服务端或路由更新之前被调用。 在这个方法被调用的时候，第一个参数被设定为当前页面的 上下文对象，你可以利用 asyncData 方法来获取数据，Nuxt.js 会将 asyncData 返回的数据融合组件 data 方法 返回的数据一并返回给当前组件。
注意：由于 asyncData 方法是在组件 初始化 前被调用的，所以在方法内是没有办法通过 this 来引用组件的实例 对象。
例子：
在上边例子中的user/_id.vue中添加，页面代码如下：
[AppleScript] 纯文本查看 复制代码 <template>
<div> 修改用户信息{{id}},名称：{{name}}
</div> </template> <script>
export default{
layout:'test', //根据id查询用户信息
asyncData(){
console.log("async方法")
return {
name:'黑马程序员'
}
},
data(){
return {
id:''
}
},
mounted(){
this.id = this.$route.params.id;
}
} </script> <style> </style>
此方法在服务端被执行，观察服务端控制台打印输出“async方法”。
此方法返回data模型数据，在服务端被渲染，最后响应给前端，刷新此页面查看页面源代码可以看到name模型数 据已在页面源代码中显示。
3.6.2 async /await方法
使用async 和 await配合promise也可以实现同步调用，nuxt.js中使用async/await实现同步调用效果。
1、先测试异步调用，增加a、b两个方法，并在mounted中调用。
[AppleScript] 纯文本查看 复制代码 methods:{
a(){
return new Promise(function(resolve,reject){
setTimeout(function () {
resolve(1)
},2000)
})
},
b(){
return new Promise(function(resolve,reject){
setTimeout(function () {
resolve(2)
},1000)
})
} },
mounted(){
this.a().then(res=>{
alert(res)
console.log(res)
})
this.b().then(res=>{
alert(res)
console.log(res)
})
}
观察客户端，并没有按照方法执行的顺序输出，使用Promise实现了异步调用。
2、使用async/await完成同步调用
[AppleScript] 纯文本查看 复制代码 async asyncData({ store, route }) {
console.log("async方法")
var a = await new Promise(function (resolve, reject) {
setTimeout(function () {
console.log("1")
resolve(1)
},2000)
});
var a = await new Promise(function (resolve, reject) {
setTimeout(function () {
console.log("2")
resolve(2)
},1000)
});
return {
name:'黑马程序员'
} },
观察服务端控制台发现是按照a、b方法的调用顺序输出1、2，实现了使用async/await完成同步调用。
| 
收藏
淘帖
踩
