介绍
ES6 引入了许多新的语言特性，其中异步迭代和生成器方法是其中的两个重要特性。异步迭代和生成器方法可以帮助开发者更加方便地处理异步操作，提高代码的可读性和可维护性。
本文将详细介绍 ES6 中的异步迭代和生成器方法，并通过示例代码演示如何使用这些方法来实现常见的异步操作。
异步迭代
异步迭代是指在异步操作中使用迭代器对象来处理异步数据。在 ES6 中，可以通过 Symbol.asyncIterator 属性来定义异步迭代器。
异步迭代器是一个具有 next() 方法的对象，该方法返回一个 Promise 对象，该对象解析为一个包含 value 和 done 属性的对象。其中，value 属性表示迭代器返回的值，done 属性表示迭代器是否已经完成。
下面是一个简单的异步迭代器示例：
// javascriptcn.com 代码示例
const asyncIterable = {
[Symbol.asyncIterator]() {
let i = 0;
return {
async next() {
if (i < 3) {
return { value: i++, done: false };
}
return { done: true };
}
};
}
};
(async function() {
for await (const num of asyncIterable) {
console.log(num);
}
})();在上面的示例中，我们定义了一个异步迭代器 asyncIterable，该迭代器可以返回三个数字。然后，我们使用 for await...of 循环来迭代异步迭代器，并将每个数字打印到控制台上。
生成器方法
生成器方法是一种特殊的函数，它可以通过 yield 关键字来暂停函数的执行，并返回一个生成器对象。生成器对象是一个具有 next() 方法的对象，该方法返回一个包含 value 和 done 属性的对象。其中，value 属性表示生成器方法返回的值，done 属性表示生成器方法是否已经执行完毕。
下面是一个简单的生成器方法示例：
// javascriptcn.com 代码示例
function* generator() {
yield 1;
yield 2;
yield 3;
}
const gen = generator();
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
console.log(gen.next().value); // 3
console.log(gen.next().done); // true在上面的示例中，我们定义了一个生成器方法 generator，该方法可以返回三个数字。然后，我们通过 gen.next() 方法来迭代生成器对象，并将每个数字打印到控制台上。
异步生成器方法
异步生成器方法是一种特殊的函数，它可以通过 yield 关键字来暂停函数的执行，并返回一个 Promise 对象。在 ES6 中，可以通过 Symbol.asyncIterator 属性来定义异步生成器方法。
异步生成器方法是一个具有 next() 方法的对象，该方法返回一个 Promise 对象，该对象解析为一个包含 value 和 done 属性的对象。其中，value 属性表示异步生成器方法返回的值，done 属性表示异步生成器方法是否已经执行完毕。
下面是一个简单的异步生成器方法示例：
// javascriptcn.com 代码示例
async function* asyncGenerator() {
yield await Promise.resolve(1);
yield await Promise.resolve(2);
yield await Promise.resolve(3);
}
(async function() {
for await (const num of asyncGenerator()) {
console.log(num);
}
})();在上面的示例中，我们定义了一个异步生成器方法 asyncGenerator，该方法可以返回三个数字。然后，我们使用 for await...of 循环来迭代异步生成器方法，并将每个数字打印到控制台上。
示例代码
下面是一个使用异步生成器方法来处理异步操作的示例代码：
// javascriptcn.com 代码示例
async function* fetchUrls(urls) {
for (const url of urls) {
yield await fetch(url);
}
}
(async function() {
const urls = [
'https://jsonplaceholder.typicode.com/todos/1',
'https://jsonplaceholder.typicode.com/todos/2',
'https://jsonplaceholder.typicode.com/todos/3'
];
for await (const response of fetchUrls(urls)) {
const data = await response.json();
console.log(data);
}
})();在上面的示例代码中，我们定义了一个异步生成器方法 fetchUrls，该方法可以异步获取多个 URL 的响应对象。然后，我们使用 for await...of 循环来迭代异步生成器方法，并将每个响应对象的 JSON 数据打印到控制台上。
总结
异步迭代和生成器方法是 ES6 中的两个重要特性，它们可以帮助开发者更加方便地处理异步操作，提高代码的可读性和可维护性。本文详细介绍了异步迭代和生成器方法的使用方法，并通过示例代码演示了如何使用这些方法来实现常见的异步操作。希望本文可以对大家学习和使用 ES6 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650e4be595b1f8cacd785888