for循环中异步请求问题：循环里面使用异步函数，如何等所有的异步函数都执行完再进行下一步

场景是这样的：

在一个列表循环里，对数据进行赋值，调用接口，循环外后面的代码需等待所有请求执行完成后再去执行。

1. Promise.all实现

Promise.all() 方法接收一个 promise 的 iterable 类型（注：Array，Map，Set 都属于 ES6 的 iterable 类型）的输入，并且只返回一个Promise实例，那个输入的所有 promise 的 resolve 回调的结果是一个数组。这个Promise的 resolve 回调执行是在所有输入的 promise 的 resolve 回调都结束，或者输入的 iterable 里没有 promise 了的时候。它的 reject 回调执行是，只要任何一个输入的 promise 的 reject 回调执行或者输入不合法的 promise 就会立即抛出错误，并且 reject 的是第一个抛出的错误信息。

伪代码如下

const pro = []
//一个列表循环
this.EarDataGrid.instance.getSelectedRowsData().forEach((item, index) => {
     // 取需要的数据
     const { BatchID, BatchName} = item
     let empty = {};
     empty['BatchID'] = BatchID //同步代码修改
     empty['BatchName'] = BatchName
     // 根据BatchID去请求xx接口，将请求合并用all请求
     pro.push(
         new Promise((res, rej) => {
             this.odataContext.bizBatchSetExpand.byKey(BatchID).then(r => {
                 res(r[0])
             })
         }))
     }
 });
 //根据刚刚push的all请求
Promise.all(pro).then((res) => {
	//在这就可以等所有的返回结果可以得到
	// do some thing...
 })
 

2. for await…of实现（推荐）

这种方法是es6新语法，其介绍如下：

for await…of 语句创建一个循环，该循环遍历异步可迭代对象以及同步可迭代对象，包括：内置的 String, Array，类似数组对象 (例如 arguments 或 NodeList)，TypedArray, Map, Set 和用户定义的异步/同步迭代器。它使用对象的每个不同属性的值调用要执行的语句来调用自定义迭代钩子。
类似于 await 运算符一样，该语句只能在一个async function 内部使用。

• for…of 针对可迭代对象身上的（array, map, set, string, typedarray, argements）
  迭代的是对象列表中的值（value） ，一般情况遍历数组

• for…in 针对对象的属性进行无序遍历，除了symbol类的属性
  遍历的是属性，一般情况适用于对象遍历

该方法使用起来，相比Promise.all要简洁的多，十分好用

代码示例如下：

/**根据批次调健康管理接口 */
async handleHealthApi() {
  // 使用for await...of实现处理异步操作
  for await (let item of this.batchList) {
    let params = `?$filter=BatchID eq '${item.BatchId}'&$orderby=ImmunityDate`;
    let { value } = await immtipApi.ImmunityPromptBatch(params)
   	// do some thing...
  }
},

变量控制

这种方法不推荐，很不推荐，建议优先使用官方推出的语法，这种写法会产生没必要的if，维护起来会越来越麻烦。

list.forEach(function (item, i) {
    setTimeout(() => {
        //模拟异步回调中
        count++;
        console.log('执行请求ing');
        //执行完所有异步操作
        if (count === list.length) {
            console.log(' 请求执行完成✅',)
            // do some thing...
        }
    }, i)
})

写在最后

觉得有用 点个赞吧