Webpack项目ESLint拦截循环内await，如何实现多请求数据数组合并

• 你当前的实现存在两个可优化的问题：
  1. 循环内写await触发no-await-in-loop规则拦截，同时这种写法会把所有HTTP请求变成串行排队：每发起一个URL请求，必须等响应拿到、数组拼接完成才会触发下一个请求，总接口耗时是所有请求的响应时间累加，比并行请求慢很多
  2. 代码里的await array.concat(response)属于无效写法：Array.prototype.concat是同步方法，返回普通数组而非Promise，加await不会起到任何异步等待作用，是完全多余的
• 完全可以通过Promise并行批处理的方式替代循环内await，无侵入实现数组合并，还能大幅提升请求效率，核心改造逻辑如下：
  1. 循环阶段不做任何等待，直接把每个URL对应的请求Promise存入集合
  2. 循环全部走完后，统一等待所有Promise执行完成
  3. 拿到所有请求的响应结果后，一次性完成数组合并，不需要循环内逐次拼接
     改造后的代码示例：

async update() {
  // 循环阶段直接收集所有并行的请求Promise，不做await
  const requestList = this.myUrls.map(url => this.getData(url));
  // 统一等待所有请求完成，拿到按原URL顺序排列的响应集合
  const allResponses = await Promise.all(requestList);
  // 一次性将多层嵌套的响应扁平化为单个一维数组
  const mergedArray = allResponses.flat();
  // 后续可直接将合并结果赋值给实例属性或做其他业务处理
  this.finalArray = mergedArray;
}

特殊场景适配说明：

• 如果业务确实要求必须严格串行执行请求（比如前一个请求失败要终止后续所有请求、请求之间存在顺序依赖），这类场景不适合并行批处理，可以在循环内await的行上方加// eslint-disable-next-line no-await-in-loop临时关闭当前行的规则校验，不要为了适配规则硬改业务逻辑
• 如果接口返回的数组存在多层嵌套结构，可以根据实际数据层级调整flat方法的入参，比如用flat(Infinity)做深层展开

内容的提问来源于stack exchange，提问作者mr.incredible