vue中循环遍历axios问题,使用promise.all解决,promise.all异常解决

项目需要前端循环遍历一个接口获取信息,promise可以保证每次接口遍历正常后统一保存返回的数据

首先: 封装Promise

fn(jsonData,config,index){
   return new Promise((resolve, reject) => {
         upload(jsonData,config).then(res => {
           if (res.code === 0) {//这里是约定的请求正常情况的返回码
             resolve(res);//数据传递到下一个promise
           } 
         }).catch(err => {
           //promise.all异常处理 都转为resolve处理数据
           resolve([err, config,index])//promise.all特性,一个异常会阻塞不进then
         })
       });
     },

第二步:使用async和await再次封装Promise 并返回Promise的值


 async waitData(jsonData, config, index) {
      let n = await this.fn(jsonData, config, index);
      return n;
    },

第三步:在循环里执行async函数

 //举例
   let li = this.list; 
   let arr = []; 
   for (let i = 0; i < li.length; i++) { 
     let obj = {}; 
     obj.projectId = li[i].id; 
     obj = this.$qs.stringify(obj);
     arr.push(this.waitData(obj, {}, i));
   }

第四步:使用用Promise.all获取所有方法正常执行后的结果集

Promise.all(arr)
      .then(res => {
         console.log(res);
        // loading.close();
       })
       .catch(err => {
       //  loading.close();
         console.log("error", err);
       });

结果如期返回数据集合

返回数据集合

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值