Vue中使用async-await处理异步请求函数的问题与示例

不使用async-await对异步请求进行同步化

使用async-await对异步请求进行同步化

结论：

使用async-await将使得整个函数延后执行，即同步的代码执行完毕后再执行；对于async函数的内部，使用了await的地方，会先执行，然后再执行函数内await之后的同步代码。

不使用async-await的函数，将先执行函数内部的同步函数，执行完同步后，跳出该函数，继续执行其它同步函数，待同步函数执行完后，再回到异步请求函数内部执行

 

图中示例代码：

methods:{
    //这里使用
    async getUserInfo(){
      this.isShow = true;
      await this.$http({
        url : this.baseUrl+'uri=info',
        method:'get',
      })
      .then((res)=>{
        console.log('start');
        this.isShow = false;
        this.name = res.data.name;
      })
      .catch((err)=>{
        console.log('错误')
      });
      console.log('last')
    }
  },
  mounted(){
    console.log('open');
    this.getUserInfo();
    console.log('end')
  }

 

methods:{
    //这里使用
    getUserInfo(){
      this.isShow = true;
      this.$http({
        url : this.baseUrl+'uri=info',
        method:'get',
      })
      .then((res)=>{
        console.log('start');
        this.isShow = false;
        this.name = res.data.name;
      })
      .catch((err)=>{
        console.log('错误')
      });
      console.log('last')
    }
  },
  mounted(){
    console.log('open');
    this.getUserInfo();
    console.log('end')
  }