javascript中的generator函数如何工作_与async函数有何关联-js教程-PHP中文网

javascript中的generator函数如何工作_与async函数有何关联

夢幻星辰

发布： 2025-12-19 22:54:08

原创

198人浏览过

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

javascript中的generator函数如何工作_与async函数有何关联

Generator 函数和 async 函数都用于处理异步流程，但机制不同：Generator 是“可暂停执行的函数”，靠 yield 交出控制权；async 函数是语法糖，底层基于 Promise 和状态机，自动处理异步等待。二者可配合使用（比如用 async 驱动 generator），但设计目标和使用场景有明显区别。

Generator 函数：手动协程，靠 yield 暂停与恢复

Generator 函数用 function* 声明，返回一个迭代器对象。每次调用 next()，函数执行到下一个 yield 表达式就暂停，并把 yield 后的值作为 { value, done } 返回。

关键点：

函数体不会立即执行，只在首次调用 next() 时开始
yield 不是返回值，而是“产出”并暂停；后续 next(arg) 的参数会成为上一个 yield 表达式的返回值（可用于双向通信）
可多次暂停/恢复，适合实现自定义迭代、状态机、协程调度

例如：

动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版

动态WEB网站中的PHP和MySQL详细反映实际程序的需求，仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法，让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能，对常用的、强大的包

525

查看详情

立即学习“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);
  })();
}
<p>// 使用
run(function* () {
const user = yield fetch('/api/user').then(r => r.json());
console.log(user);
});

登录后复制

现代 async/await 就是把这个模式固化进语言，省去了手动 runner 和 generator 的样板代码。