在 ECMAScript 2017（ES8）中使用异步迭代器
前言
在 Web 开发中，异步编程是必不可少的。为了解决异步编程的复杂性，JavaScript 开发者比较常用的方式是 Promise，async/await。ES8 引入了一种新的东西——异步迭代器。在这篇文章中，我们将深入探讨什么是异步迭代器，以及如何在 ES8 中使用它。
什么是迭代器？
在深入探讨异步迭代器之前，我们需要先了解什么是迭代器。迭代器是一种对象，它提供一个 next() 方法，每次调用 next() 方法都会返回一个包含两个属性的对象：
value：表示迭代器当前位置的值。
done：表示迭代器是否已经到达末尾。如果是末尾，则为 true；否则为 false。
下面是一个迭代器的例子：
const list = [1, 2, 3]; const iterator = listSymbol.iterator;
console.log(iterator.next()); // 输出 { value: 1, done: false } console.log(iterator.next()); // 输出 { value: 2, done: false } console.log(iterator.next()); // 输出 { value: 3, done: false } console.log(iterator.next()); // 输出 { value: undefined, done: true }
上面的例子展示了如何创建一个迭代器并调用 next() 方法获取当前位置的值。
什么是异步迭代器？
异步迭代器是将异步编程和迭代器结合在一起的概念。异步迭代器可以用来处理那些需要异步获取下一个值的场景，例如从网络请求数据。和迭代器一样，异步迭代器提供 next() 方法，只不过 next() 方法返回的是一个 Promise，用来处理异步获取下一个值的逻辑。
在 ES6 中，迭代器是通过 Symbol.iterator 实现的。同样的，在ES8中，异步迭代器也是通过 Symbol.asyncIterator 实现的。下面是一个异步迭代器的例子，我们使用了一个模拟的异步请求获取数据的函数 getAsyncData()：
const getAsyncData = () => { return new Promise(resolve => { setTimeout(() => { resolve(Math.ceil(Math.random() * 10)); }, 1000); }); };
const asyncIterator = { Symbol.asyncIterator { return { async next() { const value = await getAsyncData(); const done = value > 8; // 若大于 8 则认为结束 return { value, done }; } }; } };
(async () => { for await (const num of asyncIterator) { console.log(num); } })();
上面的例子中，我们通过 getAsyncData() 模拟异步请求，并定义了一个 asyncIterator 对象，它是一个异步迭代器对象。它的 next() 方法通过调用 getAsyncData() 来获取下一个值。我们在一个 for await...of 的循环中使用异步迭代器，可以看到每次输出的值都是一个随机的数字。
总结
异步迭代器是一种新的方式，用来处理异步场景下的迭代器。在 ES8 中，我们可以很方便地使用 Symbol.asyncIterator 来定义一个异步迭代器，并使用 for await...of 循环来遍历异步迭代器。这个功能方便了我们处理那些需要异步处理的数据集。是我们前端开发的一个很好的工具。
示例代码
你可以在这里找到上面例子的完整代码：
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64eed634f6b2d6eab38c835d