JavaScript通过Generator和Async/Await实现协程式异步控制：1. Generator函数用yield暂停执行，通过next()手动恢复，支持外部控制与双向通信；2. Async/Await基于Promise，以同步语法自动处理异步流程，无需手动驱动；3. Async/Await是Generator的语法升级，内置自动执行机制，成为现代JS异步编程标准。
JavaScript 本身是单线程语言，不支持传统意义上的多线程协程，但通过 Generator 函数和 Async/Await 语法，实现了类似协程的“可暂停与恢复执行”的能力，从而支持异步流程的有序控制。
Generator：手动控制的协程
Generator 是 ES6 引入的一种特殊函数，通过 function* 定义，使用 yield 暂停执行，外部调用者可以逐步驱动其运行，实现协程的基本形态。
它返回一个迭代器对象，每次调用 .next() 才继续向下执行，直到遇到下一个 yield 或函数结束。
函数执行可中断：遇到 yield 时暂停，保留当前上下文（如变量状态）外部控制权：由调用者决定何时恢复，实现协作式调度双向通信：next() 可传值进入函数体，yield 可返回值出去
示例：
Poixe AI
统一的 LLM API 服务平台，访问各种免费大模型
75 查看详情
立即学习“Java免费学习笔记（深入）”；
function* counter() {
let count = 0;
while (true) {
yield ++count;
}
}
const gen = counter();
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
这就像一个可以随时暂停和恢复的任务，具备协程的核心特征。
Async/Await：基于 Promise 的自动协程
Async/Await 是 Generator 在异步编程中的语法升级，底层依赖 Promise，但使用方式更自然，像写同步代码一样处理异步逻辑。
async 函数自动返回 Promise，await 后面跟一个 Promise，函数会在此处“暂停”，直到 Promise resolve，再恢复执行。
自动执行：不像 Generator 需要手动调 next()，await 自动等待并恢复错误处理友好：可以用 try/catch 捕获异步异常语义清晰：代码结构接近同步，易于理解和维护
示例：
立即学习“Java免费学习笔记（深入）”；
async function fetchData() {
try {
const res = await fetch(‘/api/data’);
const data = await res.json();
return data;
} catch (err) {
console.error(err);
}
}
fetchData().then(data => console.log(data));
虽然 JavaScript 引擎不会真正阻塞线程，但 await 让异步代码表现出“顺序暂停”的行为，本质上是一种自动化的协程模式。
两者关系与演进
Generator 最初被用来解决回调地狱，配合工具函数（如 co）可以实现自动执行异步流程，是早期的协程实践。而 Async/Await 可以看作 Generator + Promise + 自动执行器的语法糖。
例如，以下 Generator 写法需要 co 库或手动驱动：
function* asyncTask() {
const res = yield fetch(‘/api/data’);
const data = yield res.json();
return data;
}
而 async/await 直接内置了这种流程控制，无需额外工具。
基本上就这些。Generator 提供了协程的原始模型，Async/Await 则让这种模式变得简洁实用，成为现代 JavaScript 异步编程的标准方式。
以上就是JavaScript 的协程概念是如何通过 Generator 和 Async/Await 实现的？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/728411.html
微信扫一扫 
支付宝扫一扫 
