基本写法

function *gen1() {
  yield 1
}
console.log(gen1())   // gen1 {<suspended>}
//  等价于
function* gen2() {
  yield 1
}
console.log(gen2())   // gen2 {<suspended>}
//  等价于
function * gen3() {
  yield 1
}
console.log(gen3())   // gen3 {<suspended>}

const genObj = {
  *gen(){
    yield 1
  }
}
console.log(genObj.gen())   // gen {<suspended>}
//  等价于
const genObj1 = {
  gen: function *() {
    yield 1
  }
}
console.log(genObj1.gen())  // gen {<suspended>}

Generator函数的写法就是在关键字function和functionName之间加一个 * ，至于空格并未有严格要求，所以gen1、gen2、gen3都是可行的。

Generator执行方式

console.log('Hi')

function *gen() {
  console.log('Hello Generator')
  let a = yield 2;
  console.log(a)

  return a + 1;

  yield 3
  console.log('Bay Generator')
}

const g = gen()

console.log('Bay')

// Hi
// Bay

console.log(g.next())
// Hello Generator
// {value: 2, done: false}
console.log(g.next())
// undefined
// {value: NaN, done: true}
console.log(g.next())
// {value: undefined, done: true}
console.log(g.next())
// {value: undefined, done: true}

暴躁老哥：那yield是个啥玩意？
yield是一个标记，用来告诉Generator函数到这停一下，并且yield默认是不返回值的。
上面的例子可以看到Generator函数在执行之后只会返回一个指针对象，内部的代码并不会执行，当调用next时才开始执行，next执行后会把指针指向下一步，执行两个指针中间的部分。同时return也代表一个指针位置，并且还是具有停止效果。
next返回{ value: any, done: Bollean }，done用来告诉我们遍历是否完成。value代表当前值。
暴躁老哥：能不能说点我听得懂的？
Generator函数就像公交车一样，执行之后得到路线，next方法告诉它：你该去下一站了，你不告诉它就不动，哎~就是玩。done就是表示有没有到终点，value表示到了哪一站。

Generator.prototype.next 方法

next 方法就是指针移到下一个yield，同时next可以传一个参数，用来指定上一个yield的返回值。

function *gen() {
  let a = yield 2;
  console.log(a)

  return a + 1;
}

const g = gen()

console.log(g.next())
// {value: 2, done: false}

console.log(g.next(3))
// 3
// {value: 4, done: true}

第一次调用next传入参数是无效的，因为它代表开始，前面并没有yield。上面例子可以看到，第一次调用next开始执行，遇到yield就停止了，同时把值传了出来，第二次调用时传入了3，所以a就变成了3，最后返回的就是4

Generator.prototype.throw 方法

throw方法的作用就是让Generator函数在这一步抛出一个错误，可在内部捕获，也可在外部捕获。

function *gen() {
  let a = 0
  try{
    yield a = 1
  } catch(err) {
    console.log('内部捕获', err)
  }
  console.log(a)
}

const g1 = gen()

console.log(g1.next())
// {value: 1, done: false}
console.log(g1.throw('来个红色'))
// 内部捕获 来个红色
// 1
// {value: undefined, done: true}

try{
  console.log(g1.throw('再来个红色'))
} catch(err) {
  console.log('外部捕获', err)
}
// 外部捕获 再来个红色

throw方法会在上一个指针处抛出一个错误，当内部没有进行捕获时，就会被外部捕获，如果外部也没有进行捕获，那么程序就会出错

Generator.prototype.return 方法

return方法会使Generator函数停止运行，并返回传入的值

function *gen() {
  console.log('go');
  yield 1
  console.log('第一站')
  yield 2
  console.log('第二站')
  yield 3
  console.log('第三站')
}

const g = gen();
g.next()  // {value: 1, done: false}
// go
g.next()  // {value: 2, done: false}
// 第一站
g.next()  // {value: 3, done: false}
// 第二站
g.next()  // {value: undefined, done: true}
// 第三站

const g1 = gen();
g1.next()  // {value: 1, done: false}
// go
g1.return('提前结束')  // {value: 提前结束, done: true}
g1.next()  // {value: undefined, done: true}
g1.next()  // {value: undefined, done: true}

自动执行

function *gen() {
  yield 1
  yield 2
  yield 3
  return 4
}

const g = gen();
let next = g.next()
console.log(next.value)
while(!next.done){
  next = g.next();
  console.log(next.value)
}
// 1
// 2
// 3
// 4

const g1 = gen()
console.log([...g1])
// [1, 2, 3]

for(let v of gen()){
  console.log(v)
}
// 1
// 2
// 3

当都是同步操作时可直接遍历指针对象，但是此操作会忽略 return。调用 next 方法可获取到 return 值。

yield* 语法

function *gen1() {
  yield 'a'
  yield 'b'
  return 'ab'
}

function *gen() {
  yield 1
  yield 2
  yield* gen1()
  yield 3
  return 4
}

const g = gen();
let next = g.next()
console.log(next.value)
while(!next.done){
  next = g.next();
  console.log(next.value)
}
// 1
// 2
// a
// b
// 3
// 4

yield*语法可以把别的Generator函数进行执行，yield会返回一个指针对象

简易异步自动执行

配合Promise实现处理异步并自动执行的一个简单案例

function thunk(fn, ...args) {
    const ctx = this;
    return function (callback) {
      try {
        const res = fn.apply(ctx, args)
        return res
      } catch (err) {
        callback(err);
      }
    }
}

function run(gen, ...arg) {
  const g = gen(...arg);
  function next(err, data) {
    err && (console.error(err))
    let result = g.next(data);
    if (result.done) return;
    const { value, done } = result;
    if(value.then) {
      value.then(res => {
        next(null, res)
      })
    }else if(typeof value === 'function') {
      Promise.resolve(value(conso.error)).then(res => {
        next(null, res)
      })
    }else {
      next(value)
    }
  }

next();
}

function test() {
  return new Promise((resolve, reject) => {
    resolve(1)
  }).then(res => {
    console.log(1)
    return res
  })
}

function *testSaga(time) {
  let resoult = {}
  yield new Promise(function(resolve, reject) {
    setTimeout(() => {
      resolve({
        saga: 2,
        list: ['hello']
      })
    }, time)
  }).then(res => {
    resoult = res
  })
  console.log('resoult', resoult)
  const b = yield thunk(test);
  console.log('b', b)
}

run(testSaga, 1000)

// resoult {saga: 2, list: Array(1)}
// 1
// b 1