JavaScript -异步遍历-Promise.all()

记录比较低级但是却踩了的坑

原因是 forEach 是 同步遍历，最后用Promis.all()解决了异步遍历的情况。

---

Promise.all()介绍

Promise.all(iterable) 此方法在集合多个 promise 的返回结果时很有用
方法返回一个 Promise 实例，此实例在 iterable 参数内所有的 promise 都“完成（resolved）”或参数中不包含 promise 时回调完成（resolve）；
如果参数中 promise 有一个失败（rejected），此实例回调失败（reject），失败原因的是第一个失败 promise 的结果。

抄自 MDN Promise.all()

使用

首先有一个异步的函数：

function sleep() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve()
    }, 1000)
  })
}

情境一：直接在循环里调用异步函数

async function withoutPromiseAll() {
  [1，2，3，4，5].forEach(async (item) => {
    await sleep(1)  
    console.log(item)
  })

  console.log('完成')
}

withoutPromiseAll()

// 这里的执行结果是：
// 		完成
// 		1
// 		2
// 		3
// 		4
// 		5 
// 以上数据基本同时依次打印出来

情境二： 循环里收集异步函数，最后用Promise.all()执行

async function promiseAll() {
  let promiseArr = []

  arr.forEach(item => {
    promiseArr.push((async (item) => {
      await sleep(1)
      console.log(item)
    })(item))
  })
  await Promise.all(promiseArr)
  console.log('完成')
}
promiseAll()

// 这里的执行结果是：
// 		完成
// 		1
// 		2
// 		3
// 		4
// 		5 
// 以上数据间隔 1s 逐个打印出来

---

以下是啰嗦踩坑过程，可忽略：

业务背景

TreeView 做子节点的懒加载，懒加载的处理函数中，要组织节点自己的数据，组织数据的过程中需要循环某部分数据，而循环时候在对item的处理中，涉及到了异步的操作，就是出现了 循环 + 异步 的操作。

问题现象

循环方法用的是forEach，现象就是，点击节点节点的时候，并没有得到理想的子节点展开，但是查看数据 这个时候是理想数据。意识到是不是同步异步的问题，就各种骚操作都试了一下，还是没有达到想要的结果。

转机

一筹莫展之时，想起前几天做别的需求时候，在github看别人代码时候看到Promise.all操作，就是用来处理多个异步，同时又搜了一下“异步循环”，刚好看到有涉及到这个方法的操作，改成Promise.all(), 问题果然解决了。