ES9中的异步迭代

2021-06-30 08:34:15 阅读：208 来源： 互联网

标签：异步 arr 迭代 ES9 item Promise time getPromise pending

从今天开始，小编和大家一起聊一聊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

标签：异步,arr,迭代,ES9,item,Promise,time,getPromise,pending
来源： https://www.cnblogs.com/feiying3995/p/14952795.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

ES9中的异步迭代