08-Nuxt.js基本使用-获取数据-async&await

3.6.2 async /await方法

使用async 和 await配合promise也可以实现同步调用，nuxt.js中使用async/await实现同步调用效果。
1、先测试异步调用，增加a、b两个方法，并在mounted中调用。

<template>
  <div>
    修改用户信息{{id}},名称：{{name}}

  </div>
</template>
<script>
  export default{
    layout:"test",
    asyncData() {
      console.log("async方法")
      return {
        name: '黑马程序员'
      }
    },
    data(){
      return {
        id:''
      }
    },
    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.id = this.$route.params.id;
      this.a().then(res=>{
        console.log(res)
      })
      this.b().then(res=>{
        console.log(res)
      })

    }
  }
</script>
<style>
</style>

观察客户端，并没有按照方法执行的顺序输出，使用Promise实现了异步调用。

2、使用async/await完成同步调用

<template>
  <div>
    修改用户信息{{id}},名称：{{name}}

  </div>
</template>
<script>
  export default{
    layout:"test",
    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:'黑马程序员'
      }
    },
    data(){
      return {
        id:''
      }
    },


    mounted(){
      this.id = this.$route.params.id;


    }
  }
</script>
<style>
</style>

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