【高频考点精讲】ES6生成器函数的10个高级用法，处理异步流程

当生成器函数遇上异步：ES6生成器函数的10个高级玩法

🧑‍🏫 作者：全栈老李

📅 更新时间：2025 年 6 月

🧑‍💻 适合人群：前端初学者、进阶开发者

🚀 版权：本文由全栈老李原创，转载请注明出处。

最近在整理前端知识体系时，发现很多同学对生成器函数(Generator)的理解还停留在yield关键字和next()方法的层面。作为全栈老李，今天我要带大家深入探索生成器函数在处理异步流程时的10个高阶用法，这些技巧在实际项目中能让你写出更优雅的异步代码。

生成器函数基础回顾

生成器函数是ES6引入的特殊函数，通过在function后加*声明。它最大的特点是能暂停执行，通过yield交出控制权，需要时再通过next()恢复执行。这个特性让它成为处理异步流程的天然利器。

function* simpleGenerator() {
   
   
  yield '全栈老李的第一课'
  yield '生成器函数真香'
  return '下课啦'
}

const gen = simpleGenerator()
console.log(gen.next().value) // "全栈老李的第一课"
console.log(gen.next().value) // "生成器函数真香"
console.log(gen.next().value) // "下课啦"

10个高级异步处理技巧

1. 异步流程同步化写法

这是生成器最经典的用法，配合co这类库，能让异步代码看起来像同步一样直观。

const co = require('co')

function* fetchUser() {
   
   
  const user = yield fetch('/api/user')  // 全栈老李提醒：这里yield会等待Promise解决
  const posts = yield fetch(`/api/posts/${
     
     user.id}`)
  return {
   
    user, posts }
}

co(fetchUser).then(data => console.log(data))

2. 自定义迭代器协议

生成器天然实现了迭代器协议，我们可以轻松创建自定义迭代逻辑。

function* objectEntries(obj) {
   
   
  const propKeys = Reflect.ownKeys(obj)
  for (const propKey of propKeys) {
   
   
    yield [propKey, obj[propKey]]  // 全栈老李：每次迭代返回键值对
  }
}

const jane = {
   
    first: 'Jane', last: 'Doe' }
for (const [key, value] of objectEntries(jane)) {