随着前端技术的不断发展，异步编程已经成为了不可避免的趋势。为了解决异步编程的困境，ES6 引入了 generator 函数，它可以用来简化异步代码的书写。但是，generator 函数在解决异步编程困境的过程中，也存在着一些限制和缺点。为了进一步提升异步编程的效率，ES9 中对异步 generator 函数进行了改进。
一、异步 generator 函数的限制
在 ES6 中，generator 函数虽然可以用来解决异步编程的问题，但存在着一些限制，主要包括以下两个方面：
1. yield 语句无法使用
由于 generator 函数是一个状态机，因此 yield 语句不能在一个异步操作的回调函数中使用。这意味着如果一个异步操作需要在回调函数中使用 yield 语句，那么就必须将该操作放在一个 Promise 中，这更加繁琐且不易理解。
// javascriptcn.com 代码示例
function* myGenerator() {
const result = yield fetch('https://api.github.com/users/octocat')
console.log(result);
}
const g = myGenerator();
const promise = g.next().value;
promise.then(res => {
return res.json();
}).then(json => {
g.next(json);
}).catch(err => {
console.error(err);
});2. 异步操作的错误处理繁琐
如果一个 generator 函数内部存在多个异步操作，那么对于每一个异步操作都需要单独的错误处理，这样不仅繁琐，还容易出错。
// javascriptcn.com 代码示例
function* myGenerator() {
try {
const response1 = yield fetch('https://api.github.com/users/octocat');
const json1 = yield response1.json();
const response2 = yield fetch('https://api.github.com/users/octocat/repos');
const json2 = yield response2.json();
} catch (err) {
console.error(err);
}
}二、ES9 中异步 generator 函数的改进
为了解决以上问题，ES9 中对异步 generator 函数进行了改进，主要包括以下两个方面：
1. yield* 语句的支持
ES9 引入了 yield* 语句，使得异步操作的回调函数中可以使用 yield 语句。这样一来，内部的异步操作就可以更加自然地穿插于 generator 函数之中。
// javascriptcn.com 代码示例
async function myAsyncFunction(url) {
const response = await fetch(url);
const json = await response.json();
return json;
}
async function* myAsyncGenerator() {
const url = 'https://api.github.com/users/octocat';
const result1 = yield* myAsyncFunction(url);
console.log(result1);
}
(async () => {
const g = myAsyncGenerator();
const result = await g.next();
})().catch(err => {
console.error(err);
});2. try...catch 语句的改进
ES9 引入了 try...catch 语句的改进，使得 generator 函数内部存在多个异步操作时，只需要一个 catch 语句即可捕获所有的错误，大大简化代码。
// javascriptcn.com 代码示例
async function myAsyncFunction(url) {
const response = await fetch(url);
const json = await response.json();
return json;
}
async function* myAsyncGenerator() {
try {
const url1 = 'https://api.github.com/users/octocat';
const result1 = await myAsyncFunction(url1);
console.log(result1);
const url2 = 'https://api.github.com/users/octocat/repos';
const result2 = await myAsyncFunction(url2);
console.log(result2);
} catch (err) {
console.err(err);
}
}
(async () => {
const g = myAsyncGenerator();
const result = await g.next();
})().catch(err => {
console.error(err);
});三、总结
异步 generator 函数是现代异步编程中非常重要的一个环节，在 ES6 中它解决了异步编程的一些困境，但存在着一些限制。在 ES9 中，通过增强 yield 语句和 try...catch 语句的功能，进一步提高了异步编程的效率，提供了更加简明且易于理解的代码实现方式。
在使用异步 generator 函数的过程中，需要注意的是，尽量保证代码的简洁性和可读性，同时加强对异步编程模型的理解和使用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654c3e147d4982a6eb5d6dd3