ES9中的异步迭代

Posted 2021-09-04 飞鹰

从今天开始，小编和大家一起聊一聊ES9中的新特性和新语法。这些语法和新特性在小编实际项目用的时候，用到的并不多，这篇之后，小编准备把文章作为类似字典的东西，以后项目用到的，或者其他人写代码的时候，至少先混个脸熟。就像我前天看到的一句话一样，好代码50%是给机器运行的，另50%是给人看的，相信大家以后写的代码会越来越好，小编会和大家一起进步。大家还可以关注我的微信公众号，蜗牛全栈。

一、同步迭代器：在之前的文章中，小编更新过一篇关于es6关于可迭代协议 迭代器协议的文章，可以看看小编的这篇文章《ES6中的Module与Interator》，下面我就简单写个例子。

const arr = ["es6","es7","es8","es9"]
arr[Symbol.iterator] = function(){
  let nextIndex = 0
  return {
    next(){
      return nextIndex < arr.length ? {
        value:arr[nextIndex++],
        done:false
      }:{
        value:undefined,
        done:true
      }
    }
  }
}

for(let item of arr){
  console.log(item) // es6 es7 es8 es9
}

二、异步迭代器
1、普通for...of...循环异步

function getPromise(time){
  return new Promise((resolve,reject) => {
    setTimeout(() => {
      resolve(time)
    })
  },time)
}
const arr = [getPromise(1000),getPromise(2000),getPromise(3000)]

for(let item of arr){
  console.log(item) // Promise{pending} Promise{pending} Promise{pending}
}

2、异步循环：使用关键字asyncIterator

function getPromise(time){
  return new Promise((resolve,reject) => {
    setTimeout(() => {
      resolve(time)
    })
  },time)
}

const arr = [getPromise(1000),getPromise(2000),getPromise(3000)]

for(let item of arr){
  console.log(item) // Promise{pending} Promise{pending} Promise{pending}
}

function getPromise(time){
  return new Promise((resolve,reject) => {
    setTimeout(() => {
      resolve({
        value:time,
        done:false
      })
    })
  },time)
}
const arr = [getPromise(1000),getPromise(2000),getPromise(3000)]
arr[asyncIterator] = function(){
  let nextIndex = 0
  return {
    next(){
      return nextIndex < arr.length ? arr[nextIndex++]:Promise.resolve({ // 相当于Promise的静态方法，返回成功状态的Promise对象
        value:undefined,
        done:true
      })
    }
  }
}

for(let item of arr){
  console.log(item) // Promise{pending} Promise{pending} Promise{pending}
}


// 等到上一次异步执行成功之后再进行下一个异步操作
async function test(){
  for await (let item of arr){
    console.log(item)
  }
}
test()  // 1000 2000 3000