Generator通过yield暂停函数执行，将异步操作结果以Promise形式返回，由执行器接收并等待其解决后，再通过next()将结果传回，实现异步流程的同步化写法。
JS协程，尤其是通过Generator实现的那种，本质上就是一种手动控制异步流程的巧妙方式，它允许我们在JavaScript中模拟出类似同步代码的执行顺序，从而极大地简化了异步操作的复杂性，尤其是在
async/await
原生支持之前，它几乎是解决“回调地狱”和提升代码可读性的一个优雅方案。
解决方案
要使用Generator实现类似
async
的执行流程，核心思想是利用Generator函数的
yield
关键字来暂停函数的执行，并在外部通过
next()
方法恢复执行，同时处理
yield
出来的异步操作（通常是Promise）。这需要一个“执行器”或者说一个“协程运行器”来协调整个过程。
我们首先定义一个Generator函数，里面用
yield
来“暂停”那些需要等待结果的异步操作。
function* myAsyncFlow() { console.log('Step 1: 开始获取用户数据...'); const userData = yield fetch('/api/users/1').then(res => res.json()); console.log('Step 2: 用户数据获取成功:', userData.name); console.log('Step 3: 开始获取用户订单...'); const orders = yield fetch(`/api/users/${userData.id}/orders`).then(res => res.json()); console.log('Step 4: 用户订单获取成功:', orders.length, '个订单'); return { userData, orders };}
然后，我们需要一个执行器来驱动这个Generator。这个执行器会不断调用Generator的
next()
方法，如果
next()
返回的值是一个Promise，它会等待Promise解决，然后将解决的值作为参数传回给下一次
next()
调用。
function run(generatorFunc) { const generator = generatorFunc(); // 获取迭代器 function step(nextValue) { const { value, done } = generator.next(nextValue); // 驱动Generator if (done) { return Promise.resolve(value); // Generator执行完毕，返回最终结果 } // 如果yield出来的是一个Promise，等待它解决 return Promise.resolve(value).then( res => step(res), // Promise解决，将结果传回Generator err => generator.throw(err) // Promise拒绝，将错误抛回Generator ); } return step(); // 启动执行}
现在，我们就可以像这样使用它：
run(myAsyncFlow) .then(result => { console.log('所有异步操作完成，最终结果:', result); }) .catch(error => { console.error('流程中发生错误:', error); });// 模拟APIfunction fetch(url) { return new Promise(resolve => { setTimeout(() => { if (url.includes('users')) { resolve({ json: () => Promise.resolve({ id: 1, name: 'Alice' }) }); } else if (url.includes('orders')) { resolve({ json: () => Promise.resolve([{ id: 101, amount: 50 }, { id: 102, amount: 75 }]) }); } }, 1000); });}
通过这种方式，原本需要层层嵌套回调或Promise链的代码，现在可以写成看起来像同步的、自上而下的流程，这在当时（
async/await
普及前）简直是革命性的。
Generator 如何在 JavaScript 中模拟异步流程的暂停与恢复？
Generator在JavaScript中模拟异步流程的暂停与恢复，其核心机制在于
yield
关键字和迭代器的
next()
方法。这不像传统的函数那样，一旦开始执行就必须一口气跑到结束。Generator函数（通过
function*
声明）执行时会返回一个迭代器对象。
当你第一次调用这个迭代器的
next()
方法时，Generator函数会开始执行，直到遇到第一个
yield
表达式。此时，函数的执行会立即“暂停”，
yield
后面跟着的值会被包装在一个
{ value: ..., done: false }
的对象中返回。这个
value
可以是任何东西，但在异步场景中，我们通常会
yield
一个Promise。
外部的执行器（就像我们上面写的
run
函数）接收到这个Promise后，它会负责等待这个Promise解决。一旦Promise解决（或者拒绝），执行器会再次调用迭代器的
next()
方法，并将Promise解决的值作为参数传进去。这个值会成为Generator函数内部
yield
表达式的返回值。
例如：
const result = yield somePromise;
当
somePromise
解决后，它的结果会通过
next()
的参数传回，并赋值给
result
变量。这样，Generator函数就能在异步操作完成后，从它暂停的地方继续执行，并且能拿到异步操作的结果，就好像那行代码是同步执行的一样。这种“协作式多任务”的模式，让开发者能够以更直观的方式处理复杂的异步逻辑，避免了传统回调或Promise链带来的心智负担。我个人觉得，理解了Generator的这个特性，就等于理解了
async/await
的底层原理，因为
async/await
本质上就是Generator和Promise的语法糖。
构建一个简易的 Generator 异步执行器需要哪些核心步骤？
构建一个简易的Generator异步执行器，通常需要以下几个核心步骤，这些步骤共同构成了一个能够驱动Generator函数，并处理其内部异步操作的完整机制。
获取Generator迭代器实例：执行器的第一步是接收一个Generator函数，并调用它来获取一个迭代器对象。例如
const generator = generatorFunc();
。这个迭代器是执行流程的入口。
定义一个递归或循环的驱动函数：这是执行器的“心脏”。这个函数会负责不断地调用迭代器的
next()
方法，直到Generator函数执行完毕。它通常会接收上一步
yield
表达式的结果作为参数，以便将其传回给Generator。
处理
next()
方法的返回值：每次调用
generator.next(previousValue)
，都会返回一个包含
value
和
done
属性的对象。
检查
done
属性： 如果
done
为
true
，说明Generator函数已经执行完毕，执行器应该停止驱动，并返回Generator的最终结果。处理
value
属性： 这是最关键的部分。如果
value
是一个Promise（这是我们期望的异步场景），执行器需要等待这个Promise解决。
等待Promise解决并传递结果：如果
value
是一个Promise，执行器会使用
Promise.resolve(value).then(...)
来等待它。一旦Promise解决，它会把解决的值作为参数，再次调用驱动函数，从而将结果“注入”回Generator函数中，让它从暂停的地方继续执行。
错误处理：异步流程中错误是不可避免的。执行器需要能够捕获Promise的拒绝（rejection），并通过
generator.throw(error)
方法将错误抛回Generator函数内部，这样Generator内部的
try...catch
块就能捕获并处理这些错误，保持了与同步代码类似的错误处理机制。
启动执行器：最后，需要一个初始调用来启动这个驱动函数，通常不带任何参数，因为它第一次调用
next()
时Generator还没有
yield
过任何值。
这些步骤形成了一个闭环，使得Generator函数能够像同步代码一样，在
yield
异步操作时暂停，等待结果，然后带着结果继续执行，极大地提升了异步代码的编写体验。这个模式在很多库中都有体现，比如早期的
co
库，就是基于这种思想实现的。
Generator 实现的协程与原生 async/await 有何异同，各自适用于哪些场景？
Generator实现的协程（或者说基于Generator的异步流程控制）与原生
async/await
在目标上高度一致：都是为了以同步代码的风格编写异步逻辑，摆脱回调地狱，提高代码可读性。然而，它们在实现机制和适用场景上存在一些显著的异同。
相同点：
同步化异步代码： 两者都允许开发者将异步操作写成看起来像同步的、自上而下的代码流程，极大地提升了可读性。避免回调地狱： 它们都是解决多层嵌套回调问题的有效方案。基于Promise：
async/await
是基于Promise的语法糖，而Generator实现的协程通常也依赖于Promise来管理异步操作的结果和错误。
不同点：
底层机制：
Generator协程： 更加底层和原始。它利用
function*
和
yield
来手动控制函数的暂停和恢复。它需要一个外部的“执行器”来驱动迭代器，处理
yield
出的Promise。你可以把它想象成一种“手动挡”的异步控制。
async/await
： 是ES2017引入的语言特性，是Promise的语法糖。
async
函数会自动返回一个Promise，
await
关键字则会暂停
async
函数的执行，直到它等待的Promise解决。它自带执行器，是“自动挡”的异步控制。
错误处理：
Generator协程： 错误处理需要执行器将Promise的拒绝通过
generator.throw(error)
方法“注入”回Generator，然后在Generator内部使用
try...catch
捕获。
async/await
：
await
表达式可以直接在
try...catch
块中捕获Promise的拒绝，与同步代码的错误处理方式完全一致，更为直观和方便。
灵活性与控制力：
Generator协程： 提供了更高的灵活性。
yield
可以暂停任何值，不仅仅是Promise。这意味着你可以用Generator实现更复杂的控制流，比如在Redux Saga中，你可以
yield
一个普通对象来描述一个副作用，而不是直接执行它。
async/await
： 专注于处理Promise。
await
只能等待Promise或其他thenable对象。它的设计目标就是简化异步操作，因此在处理非Promise的暂停/恢复场景时不如Generator灵活。
适用场景：
async/await
：
绝大多数现代异步编程场景： 无论是前端的API请求、用户交互，还是后端的数据库操作、文件I/O，
async/await
都是首选。它简洁、易用、错误处理直观，是JavaScript异步编程的“标准答案”。团队协作和维护： 由于其是语言原生特性，且约定俗成，团队成员更容易理解和维护使用
async/await
编写的代码。
Generator 实现的协程：
async/await
出现之前的过渡方案： 在
async/await
尚未普及的ES6时代，Generator协程（如
co
库）是解决异步流程控制的强大工具。需要精细控制流的框架或库： 某些库或框架，例如Redux Saga，利用Generator的强大灵活性来构建复杂的副作用管理机制。它们不只是等待Promise，还可能
yield
出各种指令对象，由外部的中间件来解释执行。自定义异步抽象层： 当你需要构建一个非常规的异步流程控制机制，或者需要处理非Promise的暂停/恢复逻辑时，Generator提供了底层的能力去实现这些。
总的来说，对于日常开发，
async/await
是毫无疑问的首选，它就是为现代异步JavaScript而生的。而Generator协程则更像是一种底层工具，它揭示了
async/await
的魔法，并在一些需要极致灵活性和自定义控制流的特定场景下，依然能发挥其独特的价值。
以上就是JS 协程与并发模型 – 使用 Generator 实现类似 async 的执行流程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1521342.html
微信扫一扫 
支付宝扫一扫 
