foreach中使用await的问题

目录

1.说明

2.示例

3.解决方案

---

1.说明

在foreach中调用异步方法，即使使用了await，不会依次执行每个异步任务，也就是说Array.prototype.forEach不会等待 Promise 完成，即使你在回调函数中返回一个 Promise，forEach 也会继续执行下一个元素，而不会等待前一个 Promise 解决（resolve）。 只是按照顺序启动了所有的异步任务

2.示例

function asyncAll() {let  arrs = []arrs.push(5000)arrs.push(4000)arrs.push(3000)arrs.push(2000)arrs.push(1000)arrs.forEach(async (item) => {console.log('在执行结果之前,'+ item)const res = await async2(item)console.log(res)console.log('在执行结果之后,'+ item)})console.log("所有的都执行完成")
}

async2是一个异步方法，返回promise，执行结果如下：

在执行结果之前,5000
在执行结果之前,4000
在执行结果之前,3000
在执行结果之前,2000
在执行结果之前,1000
所有的都执行完成
1000
在执行结果之后,1000
2000
在执行结果之后,2000
3000
在执行结果之后,3000
4000
在执行结果之后,4000
5000
在执行结果之后,5000

按照顺序启动了任务，但实际却是最后一个任务先执行完成，第一个任务最后执行完成；并且foreach中的任务没有执行完成就执行了foreach后面的处理。

3.解决方案

①使用for of循环，异步任务会按照顺序依次执行

②如果异步任务之间没有明确的顺序，可以使用promise all处理，循环将每个异步任务放在任务数组中，使用promise.all同时执行所有的异步任务，在then处理中可以获取所有异步任务的结果，然后进行后续的处理，这样可以确保异步任务和后续处理的顺序