如何实现for循环内异步请求全完成后再执行后续逻辑，且兼容IE？

实现思路 #

• 核心使用Promise.all搭配单个请求兜底处理，既保证请求并发，又不会因为单个请求失败中断后续请求，还能等待所有请求完成后再执行后续逻辑
• 兼容IE的前提是提前完成ES6+语法转译和Promise polyfill引入

前置适配要求（针对IE） #

• 项目配置babel，将async/await、箭头函数、模板字符串等ES6+语法转译为ES5语法
• 引入Promise polyfill（可使用core-js或es6-promise库实现）
• 锁定axios版本为0.x版本（1.x及以上版本不再支持IE）

代码修改 #

修正submitToTheOthers方法 #

async submitToTheOthers(){
  let data = {
    data : 'test',
  }
  // 存储所有请求的Promise实例
  let requestArr = []
  for (let i=0; i< this.idxs.length ;i++){
    // 每个请求单独处理成功/失败逻辑，避免单个失败影响整体
    let singleRequest = updateGeneralInfoToOther(1, data, this.serverFullAddress[i])
    .then((res) => {
      this.serverResCheck[i] = res.status === 200
    })
    .catch(() => {
      // 请求异常时也标记为失败，保证Promise.all不会提前终止
      this.serverResCheck[i] = false
    })
    requestArr.push(singleRequest)
  }
  // 等待所有请求处理完成后再返回
  return Promise.all(requestArr)
}

修正submitTotalServer中的不兼容逻辑 #

原代码中数组比较、模板字符串均不兼容IE，修改如下：

async submitTotalServer() {
  await this.submitToTheOthers()      
  
  let items = []
  for(let i=0; i< this.idxs.length ; i++){
    if(!this.serverResCheck[i]){
      items.push(this.serverNames[i])
    }
  }
  // 修正数组判断逻辑，替换IE不支持的模板字符串
  if(items.length === 0){
    alert('saved in all servers')
  }else{
    alert('[' + items.join(',') + '] Error')
  }
},

方案说明 #

• 所有updateGeneralInfoToOther请求会同时发起，不会串行等待，满足并发请求需求
• 单个请求成功/失败只会修改对应下标serverResCheck的值，不会中断其他请求执行
• 外层await this.submitToTheOthers()会等待所有请求全部处理完成后，才会执行后续从let items = []开始的逻辑

内容的提问来源于stack exchange，提问作者niddddddfier