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

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 表达式的返回值（可用于双向通信）
可多次暂停/恢复，适合实现自定义迭代、状态机、协程调度

例如：

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 捕获

例如：

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 的样板代码。