vue async和await实现同步和异步

async

async的用法,它作为一个关键字放到函数前面,用于表示函数是一个异步函数,因为async就是异步的意思,异步函数也就意味着该函数的执行不会阻塞后面代码的执行,async函数返回的是一个promise 对象。async 函数也是函数,平时我们怎么使用函数就怎么使用它。

await

await的含义为等待。意思就是代码需要等待await后面的函数运行完并且有了返回结果之后,才继续执行下面的代码。

场景

场景如下:现在的逻辑是根据后端API的返回数据修改echart的option中的series.data,然后执行setOption方法,渲染图标,但是遇到的问题是,后端API可以正常返回数据,但是根据console的显示是先执行了setOption方法,后执行了API数据赋值给series.data,所以图表渲染不出想要的数据,代码如下

methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id));
      fetchOverview().then(response => { 
        console.log('1--')
        console.log(response.items)
        console.log('2--')
        this.option.series[0].data = response.items
      }).catch(error => {
        console.log(error);
      })
      console.log('a----')
      console.log(this.option.series[0].data)
      console.log('b-----')
      this.chart.setOption(this.option);
    },
  }

说明fetchOverview默认是异步执行的,及没有阻塞fetchOverview这个函数后面的内容先执行(所以先输出了a---和b---),而如果要是fetchOverview改成同步执行的话需要使用async和await结合使用

所以修改后的代码如下:

methods: {
    async initChart() {
      this.chart = echarts.init(document.getElementById(this.id));
      await fetchOverview().then(response => { 
        console.log('1--')
        console.log(response.items)
        console.log('2--')
        this.option.series[0].data = response.items
      }).catch(error => {
        console.log(error);
      })
      console.log('a----')
      console.log(this.option.series[0].data)
      console.log('b-----')
      this.chart.setOption(this.option);
    },
  }

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×