vue使用echarts时created里拿到的数据无法渲染问题

问题描述:在vue里使用echart时,created里请求的数据,但是却无法渲染;

代码如下:

//created里获取数据
async created() {
    const res = await this.$http.get('reports/type/1')
    this.option.legend.data = res.data.data.series.map((item) => item.name)
    console.log('created' + this.option.legend.data)
  },
//mounted里渲染echart表格
 mounted() {
    let myChart = this.$echarts.init(this.$refs.myEchart)
    this.option && myChart.setOption(this.option)
  },

原因分析: 通过vue插件调试,数据确实已经拿到了,但是却无法渲染,数据拿到,但是无法渲染,推断应该是执行顺序出了问题,获取的数据在渲染之后才拿到的。 初步怀疑是await的问题,加入验证代码测试一下:

async created() {
    const res = await this.$http.get('reports/type/1')
    this.option.legend.data = res.data.data.series.map((item) => item.name)
    //打印1
    console.log(1)
  },
   mounted() {
    let myChart = this.$echarts.init(this.$refs.myEchart)
    this.option && myChart.setOption(this.option)
    //打印2
    console.log(2)
  },

神奇的一幕出现了,果然和我们想的一样:先执行了mounted()里的函数

vue使用echarts时created里拿到的数据无法渲染问题_第1张图片

mounted()为什么会打印在created()前面呢?

让我们来了解一下async/await :await会阻塞其所在表达式中后续表达式的执行(在和await在同一函数内但在await后面的代码会被阻塞,形成类似微任务的存在),但是不会阻碍外部函数的执行!!

结论:await阻碍了同函数内的代码,整个created函数执行变慢(相当于变成异步),所以mounted先执行,导致数据无法获取;

解决措施:将请求放在mounted里


	//正确代码
  async mounted() {
  	//获取数据
    const res = await this.$http.get('reports/type/1')
    this.option.legend.data = res.data.data.series.map((item) => item.name)
    this.option.series = res.data.data.series
	//渲染
    let myChart = this.$echarts.init(this.$refs.myEchart)
    this.option && myChart.setOption(this.option)
  },

你可能感兴趣的:(前端避坑指南,echarts,vue.js,javascript)