Vue中循环调用同一接口获取数据，解决异步无法知道数据什么时候加载完成的问题

问题描述：

     最近在做公司项目的时候遇到一个问题，要获取echart图中的多条线的数据，需要循环多次调用一个接口，无法知道所有数据何时加载完成。

解决方案：

思路：使用Promise，将调用接口的函数转变为一个Promise对象，定义全局变量数组，在循环中将Promise对象push到数组中，然            后用Promise.all()执行接口调用，在调用成功后执行绘图操作。

代码：

data(){
  return {
    // 数组 用来存储Promise对象
    result:[],
   
  },
  
methods:{

  // 获取单条线参数
  getSingleData(params){
     return new Promise((resolve,reject)=>{
    
     this.$store.dispatch("ajaxGet",{
       url:api,
       params:params
     }).then(res=>{
       if(res.status_code===200){
        resolve();
       }else{
         reject()
      }
     })

    });
  },

  // 获取所有数据
  getAllData(){
   for(let i=0;i<len;i++){
     this.result.push(this.getSingleData(params[i]));
   }
  },

  // 绘图
  getChart(){
   Promise.all(this.result).then(()=>{
    // 调用完所有接口需要做的事情
   }).catch(error => {
              this.$Message.error("获取数据失败");
              console.log("error", error);
    })
  }


}
  
 

}