在Vue中，由于fetchOverview默认是异步执行的，导致setOption方法先于数据赋值执行，无法正确渲染图表。通过使用async和await，可以将异步操作转化为同步效果。本文介绍了如何在Vue的方法中利用async/await来确保数据获取完成后才执行后续操作，从而解决图表渲染问题。同时，还提到了在Vue的mounted阶段如何正确地顺序执行async函数。
场景如下：现在的逻辑是根据后端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);
},
}
浏览器console输出如下
说明fetchOverview默认是异步执行的，及没有阻塞fetchOverview这个函数后面的内容先
最低0.47元/天 解锁文章
扫一扫
6446
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
