JavaScript 异步遍历

1. 对象的 for in 遍历 和 数组的 forEach 遍历都不支持异步写法
2. 支持异步遍历的三种方法分别是：for、for of、for-await-of
3. 异步遍历可以解决异步回调地狱
4. 如果每一个异步函数之间没有相互依赖关系，只需最后一个异步执行完的统一结果，则直接上 Promise.all，更省时
5. 如果每一个异步函数之间相互顺序依赖的话，那只能选择 for 异步

案例

 const p1 = () => {
     return new Promise((resolve,reject)=>{
         setTimeout(()=>{
             resolve('p1');
         },1000)
     })
 }
 const p2 = () => {
     return new Promise((resolve,reject)=>{
         setTimeout(()=>{
             resolve('p2');
         },1000)
     })
 }
 const p3 = () => {
     return new Promise((resolve,reject)=>{
         setTimeout(()=>{
             resolve('p3');
         },1000)
     })
 }

 const list = [p1,p2,p3]

方案一：for & Async

1. for

async function getAsyncResult (list){
   const resultList = []
   for (let i = 0; i < list.length; i++) {
      const result = await list[i]()
      console.log(result)
      resultList.push(result)
   }
   console.log(resultList)
}
getAsyncResult(list)
// 结果
// 1000ms --- p1
// 2000ms --- p2
// 3000ms --- p3 & ['p1', 'p2', 'p3']

方案二：for of

async function getAsyncResult (list){
   const resultList = []
   for (const item of list) {
      const result = await item()
      console.log(result)
      resultList.push(result)
   }
   console.log(resultList)
}
getAsyncResult(list)
// 结果
// 1000ms --- p1
// 2000ms --- p2
// 3000ms --- p3 & ['p1', 'p2', 'p3']

方案三：for-await-of 循环（专门用于异步迭代）

 async function getAsyncResult (list){
    const resultList = []
     for await (const item of list) {
         const result = await item()
         console.log(result)
         resultList.push(result)
     }
    console.log(resultList)
}
getAsyncResult(list)
// 结果
// 1000ms --- p1
// 2000ms --- p2
// 3000ms --- p3 & ['p1', 'p2', 'p3']

方案四：Promise.all

如果每一个异步函数之间没有相互依赖关系，只需最后一个异步执行完的统一结果，则直接上 Promise.all，得到最终结果的时间上要比 for 异步短，for 是无论如何都要排队的，Promise.all 则是并行

// 注意list里面的值
const list = [p1(),p2(),p3()]

Promise.all(list).then(result=>{
    console.log(result)
})

// 1000ms --- ['p1', 'p2', 'p3']

for await of 是做什么的？

可遍历多个promise对象，批量调用promise

  // 借助 console.time() 和 console.timeEnd() 查看，得到结果：for比forEach快
  const arr = []
  for (let i = 0; i < 1000 * 10000; i++) {
    arr.push(i)
  }
  console.time()
  let a1 = 0
  for (let index = 0; index < arr.length; index++) {
    a1++
  }
  console.timeEnd()
  console.time()
  let a2 = 0
  arr.forEach(item =>{
    a2++
  })
  console.timeEnd()