ES9 中的 AsyncIterator

在 ES9 中，我们可以使用 AsyncIterator 来异步迭代一个集合。这个新特性让我们可以更加方便地处理异步任务的集合，比如 Promise 数组。

AsyncIterator 是什么？

在 ES6 中，我们引入了 Iterator 接口。它定义了一个 next() 方法，用于依次迭代一个集合中的每个元素。ES9 中的 AsyncIterator 则是 Iterator 的异步版本，它的 next() 方法返回的是一个 Promise。

AsyncIterator 接口定义如下：

interface AsyncIterator {
  next(): Promise<IteratorResult>;
  return?(value?: any): Promise<IteratorResult>;
  throw?(e?: any): Promise<IteratorResult>;
}

AsyncIterator 的 next() 方法返回一个 Promise，它的值是一个 IteratorResult 对象。IteratorResult 对象有两个属性：done 和 value。done 表示迭代是否结束，value 表示当前迭代的值。

AsyncIterator 的使用

AsyncIterator 的使用和 Iterator 类似，我们可以使用 for-await-of 循环来异步迭代一个集合。

async function asyncFunc() {
  const arr = [1, 2, 3];
  for await (const item of arr) {
    console.log(item);
  }
}

上面的代码中，我们使用 for-await-of 循环异步迭代了一个数组。

AsyncIterator 和 Promise.all()

在处理 Promise 数组时，我们通常会使用 Promise.all() 来等待所有 Promise 完成。ES9 中，我们可以使用 AsyncIterator 来更加方便地处理 Promise 数组。

// javascriptcn.com 代码示例
async function asyncFunc() {
  const promises = [
    Promise.resolve(1),
    Promise.resolve(2),
    Promise.resolve(3),
  ];
  const asyncIterator = promises[Symbol.asyncIterator]();
  let sum = 0;
  while (true) {
    const { done, value } = await asyncIterator.next();
    if (done) break;
    sum += value;
  }
  console.log(sum); // 6
}

上面的代码中，我们使用了 Promise 数组的 AsyncIterator，然后使用 while 循环异步迭代了这个数组。在每次循环中，我们使用 await 来等待下一个 Promise 完成，并将它的值加到 sum 中。

总结

ES9 中的 AsyncIterator 让我们更加方便地处理异步任务的集合，特别是 Promise 数组。使用 AsyncIterator，我们可以异步迭代一个集合，并等待每个异步任务完成。这个新特性对于异步编程非常有帮助，我们应该尽快学习并掌握它。

示例代码

// javascriptcn.com 代码示例
async function asyncFunc() {
  const arr = [1, 2, 3];
  const asyncIterator = arr[Symbol.asyncIterator]();
  let sum = 0;
  while (true) {
    const { done, value } = await asyncIterator.next();
    if (done) break;
    sum += value;
  }
  console.log(sum); // 6
}

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6563ea51d2f5e1655dd5a092