forEach处理异步任务遇到的坑

前言

在forEach处理了异步，但是始终不能顺序执行，至此想要的数据怎么都拿不到，绞尽脑汁，也不知道问题发生在哪里。此篇文章我们就来探究下forEach循环下处理异步会发生什么样的情况。

---

探索

• 创建一个异步函数

const promiseTasek = (num) => {
    return new Promise((resolve, reject) => {
        setTimeout(()=>{
            console.log(num)
            resolve(true)
        },3000)
    })
}

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

// 等待 3 秒 直接输出1 2 3 4 5 6
function toTaskByForEach() {
    const arr = [1,2,3]
    arr.forEach(async item => {
        await promiseTasek(item)
    })
}
toTaskByForEach()

执行结果 注意执行输出的变化，他会**直接打印**出1，2，3

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

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

来看下执行结果 他会按**顺序执行**依次打印出1，2，3

结论

forEach 不会按顺序执行 而是并发执行异步任务
for of 和 普通的for循环却能顺序执行异步任务

解密: forEach为什么是并发执行

在 tc39的文档中 第五点 说明 **foreach 会用 while循环 判断当前的索引是否小于数组的length,如果小于会一直执行下去不会等待异步任务执行完成**。
所以这就解释通了forEach为什么直接输出1，2，3了。