Generator函数是手动协程,靠yield暂停恢复;async函数是自动Promise化语法糖,用await封装异步等待;二者机制不同但可协作,async本质是generator+自动runner的高级抽象。

Generator 函数和 async 函数都用于处理异步流程,但机制不同:Generator 是“可暂停执行的函数”,靠 yield 交出控制权;async 函数是语法糖,底层基于 Promise 和状态机,自动处理异步等待。二者可配合使用(比如用 async 驱动 generator),但设计目标和使用场景有明显区别。
Generator 函数:手动协程,靠 yield 暂停与恢复
Generator 函数用 function* 声明,返回一个迭代器对象。每次调用 next(),函数执行到下一个 yield 表达式就暂停,并把 yield 后的值作为 { value, done } 返回。
关键点:
函数体不会立即执行,只在首次调用 next() 时开始yield 不是返回值,而是“产出”并暂停;后续 next(arg) 的参数会成为上一个 yield 表达式的返回值(可用于双向通信)可多次暂停/恢复,适合实现自定义迭代、状态机、协程调度
例如:
立即学习“Java免费学习笔记(深入)”;
function* counter() { let i = 0; while (true) yield ++i;}const it = counter();it.next(); // { value: 1, done: false }it.next(); // { value: 2, done: false }
async 函数:自动 Promise 化,await 封装异步等待
async 函数本质是返回 Promise 的普通函数。内部遇到 await 时,若右侧是 Promise,则暂停当前函数执行,等其 settled 后继续;否则直接转为 resolved Promise。
关键点:
不需要手动调用 next(),引擎自动调度,开发者只需写同步风格代码await 只能在 async 函数内使用,且只能等待 thenable 对象(Promise 或带 then 方法的对象)错误通过 Promise rejection 抛出,可用 try/catch 捕获
例如:
立即学习“Java免费学习笔记(深入)”;
async function fetchUser() { try { const res = await fetch('/api/user'); const user = await res.json(); return user; } catch (err) { console.error(err); }}
二者如何关联:generator 可被 async 驱动,实现类似 async/await 的流程
早期(Promise 普及但 async/await 还未支持时),常用 co 库或手写 runner,用 async 函数递归调用 generator 的 next(),把 yield 后的 Promise 自动 await 并传回结果——这就是 async/await 的雏形逻辑。
例如简易 runner:
function run(genFn) { const gen = genFn(); return (function next(val) { const { value, done } = gen.next(val); if (done) return value; return Promise.resolve(value).then(next); })();}// 使用run(function* () {const user = yield fetch('/api/user').then(r => r.json());console.log(user);});
现代 async/await 就是把这个模式固化进语言,省去了手动 runner 和 generator 的样板代码。
选择建议:优先用 async,generator 用于特殊场景
日常异步操作(API 调用、定时器、文件读取等)直接用 async/await,语义清晰、调试友好、生态完善。
Generator 更适合以下情况:
需要精确控制执行节奏(如游戏帧循环、流式数据生成)实现自定义迭代协议([Symbol.iterator])构建状态机或协程式任务调度器与某些库深度集成(如 Redux-Saga 中用 generator 控制副作用)
不复杂但容易忽略:async 函数不是 generator 的替代品,而是更高层的抽象;generator 提供了更底层的控制能力,async 提供了更简洁的异步表达——理解它们的协作逻辑,有助于读懂底层库和写出更灵活的异步逻辑。
以上就是javascript中的generator函数如何工作_与async函数有何关联的详细内容,更多请关注创想鸟其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1544225.html
微信扫一扫
支付宝扫一扫