Generator是 ES6 中新增的一个特性，它可以让我们以一种更加优雅和简单的方式编写异步代码。在本文中，将介绍 Generator的相关知识和使用技巧。
什么是Generator
Generator是一种函数，通过 yield 和 next 来控制函数的执行流。当一个 Generator 被调用时，它不会立即执行，而是返回一个迭代器对象，当我们对这个迭代器对象调用 next() 方法时，Generator 函数内部会执行到下一个 yield 语句并将它的值返回，当 Generator 函数没有更多的 yield，返回 undefined。
下面是一个简单的 Generator 函数，它可以输出 0 - 9：
// javascriptcn.com 代码示例
function* count() {
for (let i = 0; i < 10; i++) {
yield i;
}
}
const counter = count();
for (let i = 0; i < 10; i++) {
console.log(counter.next().value);
}Generator中的错误处理
在ES6中，Generator函数是支持try-catch语法的，通过这个特性，我们可以更加简单地处理异常：
// javascriptcn.com 代码示例
function* tryExample() {
try {
yield 'a';
} catch (err) {
yield err.message;
}
yield 'b';
}
const iterator = tryExample();
console.log(iterator.next().value); // "a"
console.log(iterator.throw(new Error('Exception!')).value); // "Exception!"
console.log(iterator.next().value); // "b"Generator实现异步操作
Generator可以实现异步操作，这是因为它可以在函数执行的过程中暂停执行，等待异步操作完成后再继续执行。我们可以通过 yield 返回 Promise 对象，然后在外部通过调用 Promise 的 then 方法来触发下一次 Generator 的执行。
下面是一个使用 Promise 进行异步操作的例子：
// javascriptcn.com 代码示例
function* asyncTask() {
const result = yield Promise.resolve('Hello');
console.log(result);
}
const generator = asyncTask();
const promise = generator.next().value;
promise.then(data => {
generator.next(data);
});实现协程
可以使用 Generator 来实现一种特殊的异步模式，称为"协程"，可以理解为一种弱化版的线程，采用协作式的多任务处理方式，同一时间只有一个任务在运行，可以更加高效地利用CPU资源。
下面是一个实现协程的例子：
// javascriptcn.com 代码示例
function* asyncJob() {
let value = yield;
console.log(value);
yield;
value = yield Promise.resolve('Finished!');
console.log(value)
}
const coroutine = asyncJob();
coroutine.next();
setTimeout(() => {
coroutine.next(1);
setTimeout(() => {
coroutine.next();
setTimeout(() => {
coroutine.next('Done!');
}, 2000);
}, 2000);
}, 2000);使用Generator组合多个异步操作
当我们需要组合多个异步操作时，使用 Promise.all 是很好的选择，但是可能会出现 Promise 执行时出错的情况，并且 Promise.all 没有提供捕获错误的机会。使用 Generator 可以更好地解决这个问题，可以捕获 Promise 执行时的异常，并通过 Generator 控制异步操作的执行流。
下面是一个组合多个异步操作的例子：
// javascriptcn.com 代码示例
function* combinedTask() {
try {
const result1 = yield Promise.resolve(1);
const result2 = yield Promise.resolve(2);
const result3 = yield Promise.resolve(3);
console.log(result1 + result2 + result3);
} catch (e) {
console.log(e);
}
}
const generator = combinedTask();
let promise;
let result;
do {
result = generator.next(promise);
if (result.done) {
break;
}
promise = result.value.catch(err => {
generator.throw(err);
});
} while (true);在这个例子中，我们通过 try-catch 捕获了 Promise 执行时出现的异常，并使用 Generator 控制了异步任务的执行流。
总结
Generator 是 ES6 中非常强大的一个特性，它可以让我们以一种更加优雅和简单的方式编写异步代码。在实际应用中，我们可以通过 Generator 来实现错误处理、异步操作、协程和多个异步操作的组合。掌握 Generator 可以帮助我们更加高效地完成前端开发工作，在写出更易于阅读和维护的代码的同时，也可以让我们更加愉悦地完成编码工作。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653632167d4982a6ebe1ca72