在现代的 Web 应用程序中，异步操作是不可避免的。这些操作可能会涉及到从远程服务器获取数据、处理大量的数据或者执行长时间的计算等。在 JavaScript 中，我们通常使用 Promise 或 async/await 来处理异步操作。然而，ES9 引入了一种新的异步迭代器机制，可以更好地处理一些异步操作的需求。
异步迭代器
异步迭代器是一个对象，该对象实现了一个 Symbol.asyncIterator 方法，该方法返回一个异步迭代器对象。异步迭代器对象实现了一个 next 方法，该方法返回一个 Promise，该 Promise 解析为一个带有 value 和 done 属性的对象。value 属性包含当前迭代的值，而 done 属性指示是否已经迭代完了。
异步迭代器的模式与普通的同步迭代器非常相似，但是它们是异步的。这意味着每当我们调用 next 方法时，它会返回一个 Promise，该 Promise 在当前迭代完成后解决为下一个迭代的值。这使得异步迭代器非常适合处理需要等待网络请求或其他异步操作的情况。
使用异步迭代器
让我们看一下如何使用异步迭代器。首先，我们需要创建一个异步迭代器对象。这可以通过在对象上实现 Symbol.asyncIterator 方法来完成。让我们来看一个简单的示例：
// javascriptcn.com 代码示例
const asyncIterable = {
[Symbol.asyncIterator]() {
let i = 0;
return {
async next() {
if (i < 3) {
await new Promise(resolve => setTimeout(resolve, 1000));
return { value: i++, done: false };
}
return { done: true };
}
};
}
};在这个示例中，我们创建了一个 asyncIterable 对象，该对象实现了 Symbol.asyncIterator 方法。该方法返回一个异步迭代器对象，该对象实现了 next 方法，该方法返回一个 Promise，该 Promise 在当前迭代完成后解决为下一个迭代的值。在这个例子中，我们模拟了一个异步操作，每次迭代都需要等待 1 秒钟。
我们可以像使用普通迭代器一样使用这个异步迭代器：
(async function() {
for await (const x of asyncIterable) {
console.log(x);
}
})();在这个例子中，我们使用了 for await...of 循环来迭代 asyncIterable 对象。由于 asyncIterable 实现了 Symbol.asyncIterator 方法，它可以被视为一个异步可迭代对象。在循环中，我们使用 await 关键字来等待每个异步迭代完成后获取其值。这使得我们可以像使用普通迭代器一样轻松地处理异步迭代器。
使用异步迭代器处理异步操作
异步迭代器非常适合处理需要等待网络请求或其他异步操作的情况。让我们来看一个更实际的示例，如何使用异步迭代器从 API 中获取数据：
// javascriptcn.com 代码示例
const fetch = require('node-fetch');
async function* fetchUsers() {
let page = 1;
while (true) {
const response = await fetch(`https://reqres.in/api/users?page=${page}`);
const data = await response.json();
if (data.data.length === 0) {
return;
}
yield data.data;
page++;
}
}
(async function() {
for await (const users of fetchUsers()) {
console.log(users);
}
})();在这个例子中，我们使用了异步迭代器从 API 中获取用户列表。fetchUsers 函数返回一个异步迭代器对象，该对象实现了 next 方法，该方法返回一个 Promise，该 Promise 在当前迭代完成后解决为下一个迭代的值。在这个例子中，我们使用了 node-fetch 库来发起网络请求，并使用了 yield 关键字来返回每个用户列表。
在 for await...of 循环中，我们使用 await 关键字来等待每个异步迭代完成后获取其值。这使得我们可以轻松地处理异步操作，如从 API 中获取数据。
总结
异步迭代器是一个非常有用的工具，可以更好地处理一些异步操作的需求。它们非常适合处理需要等待网络请求或其他异步操作的情况。在本文中，我们介绍了异步迭代器的基本概念，并演示了如何使用它们来处理异步操作。希望本文能够帮助你更好地理解异步迭代器的使用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6550b8a5d2f5e1655da8b38a