JavaScript 异步可迭代定时器

JavaScript/前端
368
0
0
2022-03-06

ES8(ES2017)引入了 async 函数和 await 关键字。await 关键字可用于 async 修饰的异步函数或者一个 Promise 对象,而异步函数本质上也就是一个返回 Promise 对象的语法糖。

ES9(ES2018) 引入了新的 for await...of 语句,可用来遍历异步可迭代对象。异步可迭代对象通过 Symbol.asyncIterator 符号来指定默认的异步迭代器,如果一个对象设置了这个属性,它就是异步可迭代对象。和同步迭代器一样,异步迭代器同样包含一个 next() 方法,该方法返回一个对象,包含 done 和 value 两个属性,前者表示循环是否结束,后者是当前循环的返回值。

如下代码实现一个异步可迭代定时器。该迭代器每隔一秒输出当前的计数器值,迭代 100 次后中止。

const asyncTimerIterator = {
  [Symbol.asyncIterator]() {
    var count = 0
        
    return {
      next() {
        count ++
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve({
              done: count > 100,
              value: count
            })
          }, 1000)
        })
      }
    }
  }
}

for await (let count of asyncTimerIterator) {
  console.log(count)
}

回调 resolve 函数表示执行成功,参数即是 await 得到的返回值;回调 reject 函数表示执行失败,参数即 await 抛出的异常,可以用 try...catch 语句来捕获。