组员大眼瞪小眼，forEach 处理异步任务遇到的坑

一位组员遇到一个问题，几个同事都没能帮忙解决，我在这边就开门见山直接描述当时他遇到的问题。他在 forEach 处理了异步，但是始终不能顺序执行，至此想要的数据怎么都拿不到，组员绞尽脑汁，不知道问题发生在哪里。此篇文章我们就来探究下 forEach 循环下处理异步会发生什么样的情况。

探索

我们先看一段简单的 forEach 处理异步的代码

//forEach 处理
let promiseTasek = (num) => {
	return new Promise((resolve, rejece) => {
		setTimeout(() => {
			console.log(num)
			resolve(true)
                }, 4000)
	})
}
function toTaskByForEach() {
	const arr = [1, 2, 3, 4, 5, 6]
	arr.forEach(async (item) => {
		await promiseTasek(item)
	})
}

toTaskByForEach()

执行结果 注意执行输出的变化，他会直接打印出 1,2,3,4,5,6 本来想录制一个 gif 的，确实没找到一个好的工具录制浏览器的控制台

我们尝试换一种循环 for of 看一下效果对比一下

let promiseTasek = (num) => {
	return new Promise((resolve, rejece) => {
		setTimeout(() => {
			console.log(num)
			resolve(true)
                }, 4000)
	})
}

async function toTaskByForOf(){
    const arr = [1,2,3,4,5,6]
    for (let i of arr) {
	await promiseTasek(i)			
    }
}
toTaskByForOf()

来看下执行结果 他会按顺序执行依次打印出 1,2,3,4,5,6

所以这是为啥呢

后来我们研究了一下 map

//forEach 处理
let promiseTasek = (num) => {
	return new Promise((resolve, rejece) => {
		setTimeout(() => {
			console.log(num)
			resolve(true)
                }, 4000)
	})
}
function toTaskByMap() {
	const arr = [1, 2, 3, 4, 5, 6]
	arr.map(async (item) => {
		await promiseTasek(item)
	})
}

toTaskByMap()