问题描述:

     最近在做公司项目的时候遇到一个问题,要获取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);
    })
  }


}
  
 

}

 

Logo

前往低代码交流专区

更多推荐