在现代的前端开发中，异步编程已经成为了不可避免的一部分。然而，异步编程往往会导致代码的可读性和可维护性变差，而且难以调试。为了解决这个问题，ECMAScript 6 引入了 Promise，而在 ECMAScript 2021 中，我们可以使用 Generator 来进一步优化异步代码。
Generator 简介
Generator 是一种特殊的函数，它可以被暂停和恢复，从而实现异步编程。在使用 Generator 时，我们可以使用 yield 关键字来暂停函数的执行，并返回一个值，而在需要的时候，我们可以使用 next 方法来恢复函数的执行，同时将一个值传递给它。
下面是一个简单的 Generator 函数的例子：
// javascriptcn.com 代码示例
function* helloWorldGenerator() {
yield 'hello';
yield 'world';
return 'ending';
}
const hw = helloWorldGenerator();
console.log(hw.next()); // { value: 'hello', done: false }
console.log(hw.next()); // { value: 'world', done: false }
console.log(hw.next()); // { value: 'ending', done: true }
console.log(hw.next()); // { value: undefined, done: true }在这个例子中，我们定义了一个 Generator 函数 helloWorldGenerator，它会依次返回字符串 'hello' 和 'world'，然后返回字符串 'ending'。我们可以使用 next 方法来逐步执行这个函数，每次调用 next 方法时，函数都会执行到下一个 yield 关键字处，并返回一个对象，其中 value 属性表示 yield 语句的返回值，而 done 属性表示函数是否已经执行完毕。
使用 Generator 优化异步代码
在 ECMAScript 2021 中，我们可以使用 Generator 来优化异步代码。具体来说，我们可以使用 Generator 函数来封装异步操作，从而避免回调地狱的出现，同时提高代码的可读性和可维护性。
下面是一个使用 Generator 函数封装异步操作的例子：
// javascriptcn.com 代码示例
function* fetchUser() {
const response = yield fetch('/api/user');
const data = yield response.json();
return data;
}
function run(generator) {
const iterator = generator();
function iterate(iteration) {
if (iteration.done) {
return iteration.value;
}
const promise = iteration.value;
return promise.then(x => iterate(iterator.next(x)))
.catch(x => iterator.throw(x));
}
return iterate(iterator.next());
}
run(fetchUser).then(data => console.log(data));在这个例子中，我们定义了一个 Generator 函数 fetchUser，它会依次执行两个异步操作：获取用户数据和解析用户数据。我们可以使用 yield 关键字来暂停函数的执行，并返回一个 Promise 对象，而在需要的时候，我们可以使用 next 方法来恢复函数的执行，并将 Promise 的结果传递给它。在这个例子中，我们使用 fetch 函数来获取用户数据，并使用 response.json 方法来解析用户数据。
为了运行这个 Generator 函数，我们定义了一个名为 run 的函数。在这个函数中，我们首先创建了一个迭代器对象，然后使用递归的方式来执行 Generator 函数。在每一次迭代中，我们首先判断迭代器是否已经执行完毕，如果已经执行完毕，就返回迭代器的返回值。否则，我们获取当前 yield 语句返回的 Promise 对象，并使用 then 方法来继续执行迭代器的下一步操作。如果 Promise 对象被拒绝，我们就使用 throw 方法将错误传递给迭代器。
最后，我们可以使用 run 函数来运行 fetchUser 函数，并在 Promise 对象被解决时打印用户数据。
总结
在 ECMAScript 2021 中，我们可以使用 Generator 函数来优化异步代码，从而避免回调地狱的出现，同时提高代码的可读性和可维护性。在使用 Generator 函数时，我们可以使用 yield 关键字来暂停函数的执行，并返回一个 Promise 对象，而在需要的时候，我们可以使用 next 方法来恢复函数的执行，并将 Promise 的结果传递给它。最后，我们可以使用一个名为 run 的函数来运行 Generator 函数，并使用递归的方式来执行 Generator 函数中的异步操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650e4de495b1f8cacd7862a1