3.6 获取数据

Nuxt.js 扩展了 Vue.js，增加了一个叫 asyncData 的方法， asyncData 方法会在组件（限于页面组件）每次加载 之前被调用。它可以在服务端或路由更新之前被调用。 在这个方法被调用的时候，第一个参数被设定为当前页面的 上下文对象，你可以利用 asyncData 方法来获取数据，Nuxt.js 会将 asyncData 返回的数据融合组件 data 方法 返回的数据一并返回给当前组件。

在上边例子中的user/_id.vue中添加，页面代码如下：[mw_shl_code=applescript,true] 
       [/mw_shl_code]此方法在服务端被执行，观察服务端控制台打印输出“async方法”。此方法返回data模型数据，在服务端被渲染，最后响应给前端，刷新此页面查看页面源代码可以看到name模型数 据已在页面源代码中显示。  3.6.2 async /await方法 使用async 和 await配合promise也可以实现同步调用，nuxt.js中使用async/await实现同步调用效果。  1、先测试异步调用，增加a、b两个方法，并在mounted中调用。[mw_shl_code=applescript,true]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)         })     }[/mw_shl_code]观察客户端，并没有按照方法执行的顺序输出，使用Promise实现了异步调用。2、使用async/await完成同步调用[mw_shl_code=applescript,true]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:'黑马程序员'       }     },[/mw_shl_code]

观察服务端控制台发现是按照a、b方法的调用顺序输出1、2，实现了使用async/await完成同步调用。