JavaScript异步编程_Generator函数-js教程-PHP中文网

JavaScript异步编程_Generator函数

betcha

发布： 2025-11-24 21:07:02

原创

690人浏览过

Generator函数是ES6引入的可暂停执行的特殊函数，通过function*定义并使用yield暂停，返回遍历器对象，调用next()逐步执行；它能结合Promise以同步方式写异步逻辑，需执行器自动处理异步结果，为async/await语法奠定基础。

javascript异步编程_generator函数

Generator函数是JavaScript中处理异步编程的一种重要方式，它通过暂停和恢复执行的机制，让开发者可以用同步的写法来管理异步操作。相比传统的回调函数或Promise链式调用，Generator提供了更清晰的逻辑结构。

什么是Generator函数

Generator函数是ES6引入的一种特殊函数，它与普通函数不同，可以在执行过程中暂停，之后再从暂停处继续执行。定义一个Generator函数需要在function关键字后加一个星号（*），并通过yield表达式来控制函数的暂停。

调用Generator函数并不会立即执行其内部代码，而是返回一个遍历器对象（Iterator），通过调用该对象的next()方法，才能逐步执行函数体内的语句。

function* myGenerator() {
  yield '第一步';
  yield '第二步';
  return '结束';
}
<p>const gen = myGenerator();
console.log(gen.next()); // { value: '第一步', done: false }
console.log(gen.next()); // { value: '第二步', done: false }
console.log(gen.next()); // { value: '结束', done: true }</p>

登录后复制

如何用于异步操作

Generator的强大之处在于它可以配合Promise使用，把异步流程写得像同步代码一样直观。通过手动或借助工具函数（如co库）调用next()，将异步结果传回Generator内部，从而实现异步控制。

立即学习“Java免费学习笔记（深入）”；

例如，发起一个网络请求时，可以这样组织代码：

function* fetchData() {
  const data1 = yield fetch('/api/user');
  const user = yield data1.json();
  console.log(user);
<p>const data2 = yield fetch('/api/posts');
const posts = yield data2.json();
console.log(posts);
}</p>

登录后复制

上面的代码看起来像是同步的，但实际上每一步都依赖前一个异步操作完成。要真正驱动这个流程，需要一个执行器函数自动调用next并处理Promise。

JavaScript异步编程：设计快速响应的网络应用

379

查看详情

自动执行Generator函数

由于每次yield后都需要等待异步结果，然后手动调用next传入结果并不现实，因此通常会封装一个自动执行器。下面是一个简单的实现：

function run(generatorFunc) {
  const iterator = generatorFunc();
<p>function handle(result) {
if (result.done) return;
const value = result.value;
if (value && typeof value.then === 'function') {
value.then(res => handle(iterator.next(res)));
} else {
handle(iterator.next(value));
}
}</p><p>handle(iterator.next());
}</p><p>// 使用
run(function* () {
const response = yield fetch('/api/data');
const data = yield response.json();
console.log(data);
});</p>

登录后复制

这种模式后来被async/await所借鉴，可以说Generator为现代异步语法奠定了基础。