Java的新项目学成在线笔记-day12（六）

3.6 获取数据
3.6.1 asyncData 方法

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

在上边例子中的user/_id.vue中添加，页面代码如下：
[mw_shl_code=applescript,true] <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> [/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完成同步调用。

Java的新项目学成在线笔记-day12（六）

猜你喜欢