Generator 使用规律

从一道题目开始:

function* gen() {
  const a = yield 1
  console.log(a)
}

为了让其能成功打印出 1, 设计如下函数:

function step(gen) {
  const it = gen()
  let result
  return function() {
    result = it.next(result).value
  }
}

进行如下调用:

var a = step(gen)
a()
a() // 1

从这个题目总结出规律:

• next 的调用数比 yield 的调用数多 1;
• 第一个 next 传参无效, 从第二个 next 开始传参有效并会作为 yield 的结果返回;

生成器中的 yield/next 除了控制能力外还有双向的消息通知能力:

• yield 后面跟的值能通过 it.next().value 取到
• it.next() 括号中的值又能作为 yield 的结果返回

yield 暂停的位置

function* foo(url) {
  try {
    const value = yield request(url)
    console.log(value)
  } catch (err) {
    ...
  }
}

const it = foo('http://some.url.1')

yield 后面跟着的语句执行完再进入暂停状态的, 在如上代码中, 当执行 it.next() 时, 可以稍加转换为如下形式:

function* foo(url) {
  try {
    const promise = request(url) // 当执行 it.next() 时, 这里是被执行的
    const value = yield promise  // 这里被暂停
    console.log(value)
  } catch (err) {
    ...
  }
}

遇到 return/throw

• 遇到 return

function* gen() {
  yield 1
  return 2
  console.log('是否执行')
}

const it = gen()
it.next() // {value: 1, done: false}
it.next() // {value: 2, done: true}
it.next() // {value: undefined, done: true}

总结: 遇到 return, generator 函数结束中断, done 变为 true;

• 遇到 iterator 的 throw

function* gen() {
  yield 1
  console.log('是否执行')
}

var it = gen()
it.throw(new Error('boom')) // Error: boom
it.next()                   // {value: undefined, done: true}

总结: 遇到 iterator 的 throw, generator 函数运行中断, done 变为 true;

Generator 的简单实现

Generator 是一个返回迭代器的函数, 下面是其简版实现:

function foo(url) {
  var state
  var val
  function process(v) {
    switch (state) {
      case 1:
        console.log('requesting:', url)
        return request(url)
      case 2:
        val = v
        console.log(val)
        return
      case 3:
        var err = val
        console.log('Oops:', err)
        return false
    }
  }
  return {
    next: function(v) {
      if (!state) {
        state = 1
        return {
          done: false,
          value: process()
        }
      } else if (state === 1) {
        state = 2
        return {
          done: true,
          value: process(v)
        }
      } else {
        return {
          done: true,
          value: undefined
        }
      }
    },
    throw: function() {
      if (state === 1) {
        state = 3
        return {
          done: true,
          value: process(e)
        }
      } else {
        throw e
      }
    }
  }
}

var it = foo('http://some.url.1')

Generator 函数的异步应用

以 co 库来说, 现在已经统一为 Generator + Promise 的调用方式, 下面进行简单的模拟:

co(function* () {
  const result = yield Promise.resolve(true)
  console.log(result) // true
})

// 简版 promise
function co(gen) {
  const it = gen()
  const step = function(data) {
    const result = it.next(data)
    if (result.done) {
      return result.value
    }
    result.value.then((data) => {
      step(data)
    })
  }
  step()
}

观察 co 库发现, co 函数后返回的是 promise, 使用如下:

co(function* () {
  const result = yield Promise.resolve(true)
  return result // 这里有个语法, it.next() 碰到 return 后, 其值会变为 { value: result, done: true } 的形式
}).then((data) => {
  console.log(data) // true
})

我们再对其稍加改造, 使之更加添近 co 库:

function co(gen) {
  return new Promise((resolve, reject) => {
    const it = gen()
    let result
    const step = function(fn) {
      try {
        result = fn()
      } catch(e) {
        return reject(e)
      }
      if (result.done) { return resolve(result.value) }
      result.value.then((data) => {
        step(() => it.next(data))
      }, (err) => {
        step(() => it.throw(err)) // 这里为了让抛错直接在 generator 消化, 所以 step 内改传函数
      })
    }
    step(() => it.next())
  })
}