【ES9系列】For await of 异步操作集合遍历

最新推荐文章于 2025-04-18 10:36:34 发布

zoe驿鹿

最新推荐文章于 2025-04-18 10:36:34 发布

阅读量923

点赞数

分类专栏： ES9 Javascript 基本功文章标签： For await of 异步操作集合遍历 Symbol.asyncIterator

本文链接：https://blog.csdn.net/webFrontEndDev/article/details/103142119

版权

ES9 异步操作集合遍历

// 异步任务
function Gen(time) {
  return new Promise((resolve, reject) => {
    setTimeout(function () {
      resolve(time)
    }, time)
  })
}

async function test() {
  let arr = [Gen(2000), Gen(100), Gen(3000)]
  for (let item of arr) {
    console.log(Date.now(), await item.then(console.log))
  }
}
test()
//1574145134469 Promise {<pending>}__proto__: Promise[[PromiseStatus]]: "resolved"[[PromiseValue]]: undefined
// 1574145134470 Promise {<pending>}
// 1574145134471 Promise {<pending>}
//100
//2000
//3000

在上述遍历的过程中可以看到三个任务是同步启动的，输出上也不是按任务的执行顺序输出的，这显然不太符合我们的要求。

for...of... 遍历同步操作，如果集合里有异步操作，for...of...无法拿到正确结果。

// 异步任务
function Gen(time) {
  return new Promise((resolve, reject) => {
    setTimeout(function () {
      resolve(time)
    }, time)
  })
}
async function test() {
  let arr = [Gen(2000), Gen(100), Gen(300