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

项目需要前端循环遍历一个接口获取信息，promise可以保证每次接口遍历正常后统一保存返回的数据首先: 封装Promisefn(jsonData,config,index){return new Promise((resolve, reject) => {upload(jsonData,config).then(res => {if (res.code === 0) {//这里是约定的

Qin__

2826人浏览 · 2021-07-02 11:43:59

Qin__ · 2021-07-02 11:43:59 发布

项目需要前端循环遍历一个接口获取信息，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);
       });