不使用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')
  }

 

 

Logo

前往低代码交流专区

更多推荐