在前端开发中，异步编程是常见的需求。从早期的回调函数、Promise 到现在的 async/await，JavaScript 异步编程方式不断地升级和优化。在 ECMAScript 2018 中，Generator 函数也被加入到异步编程的解决方案中。本文将介绍 Generator 函数的基本用法和使用场景，探讨如何利用 Generator 函数进行异步编程。
Generator 函数基础
Generator 函数是一种特殊的函数，通过在函数名前加上*，来表示这是一个 Generator 函数。在 Generator 函数内部，使用 yield 关键字可以将函数执行暂停，并将 yield 后面的值返回给 Generator 函数调用方。Generator 函数可以多次执行，每次执行到一个 yield 关键字就会停止，并返回 yield 后面的值，直到所有代码执行完毕或者遇到了 return 关键字。
下面是一个简单的 Generator 函数示例：
-- -------------------- ---- ------- --------- ----------- - ----- -- ----- -- ------ -- - ----- --- - ------------ ------------------------ -- - ------ -- ----- ----- - ------------------------ -- - ------ -- ----- ----- - ------------------------ -- - ------ -- ----- ---- - ------------------------ -- - ------ ---------- ----- ---- -展开代码
在这个示例中，我们定义了一个 Generator 函数 generator，里面包含了三个 yield 关键字和一个 return 关键字。我们通过调用 generator() 函数创建了一个 Generator 函数实例 gen，并通过调用 gen.next() 方法来执行 Generator 函数。每次调用 gen.next() 方法，都会执行 Generator 函数中的代码，并在遇到 yield 关键字时返回 yield 后面的值。当遇到 return 关键字时，Generator 函数执行完毕，done 属性值为 true。
Generator 函数与异步编程
在日常开发中，我们会遇到很多需要异步编程的场景，例如网络请求、I/O 操作等等。为了避免回调地狱和 Promise 链式调用过长等问题，我们可以使用 Generator 函数来简化异步编程过程。
使用 Generator 函数处理异步操作
我们可以在 Generator 函数中使用 yield 关键字来暂停函数执行，并等待异步操作完成后再继续执行。当异步操作完成后，我们可以通过调用 Generator 函数的 .next() 方法来继续执行 Generator 函数。
下面是一个使用 Generator 函数处理异步操作的示例：
function* fetchData() { const data = yield fetch('https://jsonplaceholder.typicode.com/todos/1'); console.log(data); } const gen = fetchData(); const result = gen.next(); result.value.then(data => gen.next(data));
在这个示例中，我们定义了一个 fetchData Generator 函数，里面使用了 fetch() 方法来进行网络请求。我们通过调用 gen.next() 方法来执行 fetchData 函数，并在第一个 yield 关键字处暂停 Generator 函数的执行。当网络请求完成后，我们通过调用 gen.next() 方法并将请求结果传入，来继续执行 Generator 函数并输出响应结果。
处理 Generator 函数和 Promise 结合调用
由于 Generator 函数的执行过程可以暂停和继续，虽然使用 Generator 函数进行异步编程可以避免层层回调嵌套的问题，但在使用中我们还需要配合 Promise 来处理异步操作。
下面是一个使用 Promise 结合 Generator 函数的示例：
-- -------------------- ---- ------- --------- ----------- - ----- -------- - ----- ------------------------------------------------------ ----- ---- - ----- ---------------- ------------------ - -------- ------------ - ----- --------- - ------ -------- -------------------- - -- ------------- - ------ ------------------------------ - ------ -------------------------------------- -- ----------------------------------- - ------ ------------------------------- - -------------------展开代码
在这个示例中，我们定义了一个 execute 函数来执行 Generator 函数，并通过 handleResult 函数处理每个异步操作的结果。当异步操作完成后，我们使用 Promise.resolve() 方法来处理异步操作结果，并通过 gen.next() 方法来继续执行 Generator 函数。
结语
除了 async/await 以外，Generator 函数也可以作为异步编程的一种方案。虽然使用 Generator 函数可以避免回调地狱和 Promise 链式调用过长等问题，但是需要配合 Promise 来使用，在代码实现上会比 async/await 多一些模板代码。在实际开发中，我们可以根据具体情况选择适合自己的异步编程方案，达到更加高效的代码编写。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d7f369a941bf7134e36765
