Generator函数通过yield暂停执行,结合Promise和执行器可实现异步流程的同步化写法,如run函数驱动Generator处理Promise,使异步操作链更清晰;虽async/await已成为主流,但Generator在复杂控制场景仍有应用价值。

JavaScript的Generator函数通过暂停和恢复执行的能力,为异步流程控制提供了一种更接近同步写法的解决方案。结合Promise和一个执行器函数,可以实现类似async/await的效果。
理解Generator函数的基本机制
Generator函数使用function*定义,调用后返回一个迭代器对象。通过yield关键字可以暂停函数执行,外部调用迭代器的next()方法继续执行并传入值。
关键点:
- 每次yield会暂停执行,返回一个{ value, done }对象
- next(value)可向Generator内部传递数据
- 利用这一特性,可以把异步操作的结果通过next()注入
结合Promise实现异步控制
将异步操作封装成Promise,并在yield后等待其完成。需要一个执行器自动处理Promise的resolve/reject,并调用next()推动流程。
立即学习“Java免费学习笔记(深入)”;
示例代码:
const iterator = generator();
function handle(result) {
if (result.done) return;
result.value.then(
data => handle(iterator.next(data)),
error => iterator.throw(error)
);
}
try {
handle(iterator.next());
} catch (err) {
iterator.throw(err);
}
}
实际应用示例
假设需要按顺序获取用户信息、订单列表和商品详情:
function fetchUser() {return fetch('/api/user').then(res => res.json());
}
function fetchOrders(userId) {
return fetch(/api/orders?user=${userId}).then(res => res.json());
}
run(function* () {
try {
const user = yield fetchUser();
const orders = yield fetchOrders(user.id);
console.log('流程完成:', { user, orders });
} catch (err) {
console.error('出错:', err);
}
});
这段代码看起来是同步的,但每个yield都在等待Promise完成。
与现代方案的对比
Generator配合执行器本质上是async/await的前身。现在的推荐做法是直接使用async/await,因为语法更简洁且原生支持。但在某些需要精细控制执行流程的场景(如状态机、复杂任务调度),Generator仍有其价值。
基本上就这些。掌握这个原理有助于理解JavaScript异步演进的脉络。










