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

最新推荐文章于 2023-03-28 22:00:15 发布

原创最新推荐文章于 2023-03-28 22:00:15 发布 · 175 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #typescript

本文探讨了在JavaScript中，forEach和forOf循环处理异步任务的区别，展示了forEach不阻塞执行导致的并行输出，而forOf则按顺序执行。通过map和awaitPromise.all的方法进行深入解析，适合理解异步编程在数组操作中的行为。

背景

大家好，我是zz,时间发生在上周，一位组员遇到一个问题，几个同事都没能帮忙解决，我在这边就开门见山直接描述当时他遇到的问题。他在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()

输出结果和forEach 一样后来我们发现Array.prototype.forEach 不是一个 async 函数，即使 Array.prototype.forEach 的参数 callback 是 async 函数，也暂停不了 Array.prototype.forEach 函数，map 也是同理