Vue中Echarts图表在请求数据返回后再初始化

问题：

在Vue项目中使用Echarts图表时，里面的数据需要请求后端接口返回，最初的想法是在created()钩子中请求获取数据，然后在mounted()钩子中初始化图表，但是未达到预期效果。

原因：

产生以上问题根本的原因是使用的axios请求是异步请求，在请求发出后，就会继续执行下面的代码，导致会出现数据还未返回，下面的代码就已经执行完了（即执行了初始化图表的代码）。

解决思路就是用Promise： 第一种情况：

如果是图表用到的数据只在一个接口中返回，直接用new Promise（）生成一个新的Promise实例，然后在里面发起请求获取数据并且赋值，然后在then方法中初始化图表即可。代码如下：

mounted(){
new Promise(resolve => {
        this.getData(resolve);
      }).then(res => {
        console.log(res);//数据返回了
      }),
},
methods:{
    getData(resolve) {
      axios({method:'get',url:'......'}).then(data => {
        if (data.status === 200) {
          this.echartsData= data.data;
          resolve("数据返回了")
        }
      });
    },
}

第二种情况：

这个也是用的比较多的，图表用到的数据要在多个接口中返回，需要等所有请求的数据都返回了，再进行初始化图表，用到Promise.all方法；该方法接受一个promise对象的数组作为参数，当这个数组里的所有promise对象全部变为resolve或有reject状态出现的时候，他才会去调用.then方法，并且它们是并发执行的。上代码：

api.js文件：封装axois请求方法的文件，为了让开发更规范化

import axios from '../plugins/axios'

//获取数据1
const getData1 = () => {
    return axios.get('XXXXXXXX1')
}

//获取数据2
const getData2 = () => {
    return axios.get('XXXXXXXX2')
}

//获取数据3
const getData3 = () => {
    return axios.get('XXXXXXXX3')
}

export{
    getData1,
    getData2,
    getData3 
}

组件中：其实初始化在created和mounted钩子中进行都可以，但是如果是mounted中的话，显示的数据有可能是页面渲染完成后，页面的响应式效果将数据显示在页面中；而created是获取到数据再渲染到页面中。所以将数据初始化放到created中的话，在逻辑上比较合理。

//引入api.js文件中封装好的方法
import import {
  getData1,
  getData2,
  getData3
} from 'services/api.js';
data(){
    return {
        data1:'',
        data2:'',
        data3:'',
    }
},
created(){
    Promise.all([
      new Promise(resolve => {
        //这里要给发请求的方法传入resolve，获取数据后将该promise状态修改为成功
        this.getDataFirst(resolve);
      }).then(res => {
        console.log(res);//获取了第一条数据
      }),
    new Promise(resolve => {
        this.getDataSecond(resolve);
      }).then(res => {
        console.log(res);//获取了第二条数据
      }),
    new Promise(resolve => {
        this.getDataThird(resolve);
      }).then(res => {
        console.log(res);//获取了第三条数据
      })
    ]).then(res => {
      //全都返回成功后执行，初始化图表
      this.getEchartData();
    });
},
//这里同样是为了规范化开发，将方法都写入methods中，mounted直接this调用即可，防止代码冗杂
methods:{
    //获取第一条数据
    getDatafirst(reslove) {
      getData1().then(data => {
        if (data.status === 200) {
          this.data1= data.data;
          //修改对应的promise状态为成功
          resolve('获取了第一条数据');
        }
      });
    },
    //获取第二条数据
    getDataSecond(reslove) {
      getData2().then(data => {
        if (data.status === 200) {
          this.data2= data.data;
          resolve('获取了第二条数据');
        }
      });
    },
    //获取第三条数据
    getDataThird(reslove) {
      getData3().then(data => {
        if (data.status === 200) {
          this.data3= data.data;
          resolve('获取了第三条数据');
        }
      });
    },
}

这样，图表的初始化就会在所有数据返回后再进行，完成了需求。