理解 generator

1. 生成器中while设置为true

redux-saga 文档中提到take实现takeEvery在while中使用了yield监听未来的 action

循环无限次

function* watchRequests() {
  console.info("xx");
  let preVal = 0;
  while (true) {
    console.info("yy");
    const ret = yield preVal + 2;
    // if (ret === 3) {
    //   break;
    // }
    preVal = ret;
    console.info("output:", ret);
  }
}

const it = watchRequests();

for (const item of it) {
  console.info(item);
}

这么调用，生成器中的while无终止条件，会导致无限循环。

循环有限次数

function* watchRequests() {
  console.info("xx");
  let preVal = 0;//记录上次外部传进来的值
  while (true) {
    console.info("yy");
    const ret = yield preVal + 2;
    // if (ret === 3) {
    //   break;
    // }
    preVal = ret;
    console.info("output:", ret);
  }
}

const it = watchRequests();

// for (const item of it) {
//   console.info(item);
// }

for (let i = 0; i < 5; i++) {
  const r = it.next(i);
  console.info("r:", r);
}

输出：

xx
yy
r: { value: 2, done: false }
output: 1
yy
r: { value: 3, done: false }
output: 2
yy
r: { value: 4, done: false }
output: 3
yy
r: { value: 5, done: false }
output: 4
yy
r: { value: 6, done: false }

每一步的执行情况为：

• 执行it.next(0)，输出

xx
yy
r: { value: 2, done: false }
解释：执行第一行代码输出xx,并进入循环体，执行并返回yield后面的计算结果，外部输出0+2，遇到yield关键字，暂停

• 执行it.next(1)，输出

output: 1
yy
r: { value: 3, done: false }
解释：next的参数1输入到生成器的内部，在上次yield的地方继续执行，将1传递给了yield前面的ret,preVal被赋值为1，output打印为1，因为没遇到yield，继续在循环体中执行代码，执行yield后面的代码preVal+2,即1+2，返回执行结果到外部，外部r打印为3

• 执行it.next(2)，输出

output: 2
yy
r: { value: 4, done: false }

• 执行it.next(3)，输出

output: 3
yy
r: { value: 5, done: false }

• 执行it.next(4)，输出

output: 4
yy
r: { value: 6, done: false }

生成器实现了函数内外部的数据通信。

生成器中有终止条件

• 终止条件为break

function* watchRequests() {
  console.info("xx");
  let preVal = 0;
  while (true) {
    console.info("yy");
    const ret = yield preVal + 2;
    if (ret === 3) {
      break;
    }
    preVal = ret;
    console.info("output:", ret);
  }
}

const it = watchRequests();

for (let i = 0; i < 5; i++) {
  const r = it.next(i);
  console.info("r:", r);
}

输出：
xx
yy
r: { value: 2, done: false }
output: 1
yy
r: { value: 3, done: false }
output: 2
yy
r: { value: 4, done: false }
r: { value: undefined, done: true }
r: { value: undefined, done: true }
当i为3，break跳出循环，生成器终止。r.value为undefined

• 终止条件为break且while有yield

function* watchRequests() {
  console.info("xx");
  let preVal = 0;
  while (true) {
    console.info("yy");
    const ret = yield preVal + 2;
    if (ret === 3) {
      break;
      // return "final";
    }
    preVal = ret;
    console.info("output:", ret);
  }
  return "biu";
}

const it = watchRequests();

for (let i = 0; i < 5; i++) {
  const r = it.next(i);
  console.info("r:", r);
}

输出：
xx
yy
r: { value: 2, done: false }
output: 1
yy
r: { value: 3, done: false }
output: 2
yy
r: { value: 4, done: false }
r: { value: 'biu', done: true } // i为3 跳出while，执行return "biu";这个时候done为true
r: { value: undefined, done: true }

i为3 跳出while，执行return "biu";这个时候done为true，上面while外没有return 执行break完，就跳出循环，且done为true，按理说不应该执行完returndone才为true吗？比如：

function* gen(arg) {
  yield 1;
  yield 2;
}

const one = gen("io");
console.info(one.next());
console.info(one.next());
console.info(one.next());
console.info(one.next());

输出：
{ value: 1, done: false }
{ value: 2, done: false }
{ value: undefined, done: true }
{ value: undefined, done: true }
是在执行第三个next后，done才为true的，跟上面while循环中的break矛盾。

• 终止条件为return

function* watchRequests() {
  console.info("xx");
  let preVal = 0;
  while (true) {
    console.info("yy");
    const ret = yield preVal + 2;
    if (ret === 3) {
      // break;
      return "final";
    }
    preVal = ret;
    console.info("output:", ret);
  }
}

const it = watchRequests();

for (let i = 0; i < 5; i++) {
  const r = it.next(i);
  console.info("r:", r);
}

输出：
xx
yy
r: { value: 2, done: false }
output: 1
yy
r: { value: 3, done: false }
output: 2
yy
r: { value: 4, done: false }
r: { value: 'final', done: true }
r: { value: undefined, done: true }

当i为3，return “final”终止循环，生成器也执行完毕，后面没有yield也没有return了，done为true

第一次运行next执行的是第一个yield上面以及右侧的代码，第二次运行next，执行的是第一个yield左侧的代码到第二个yield右侧的代码。以此类推。

终止条件为return且while循环中有两个yield

function* watchRequests() {
  console.info("xx");
  let preVal = 0;
  while (true) {
    console.info("yy");
    const ret = yield preVal + 2;
    yield "geek";
    if (ret === 3) {
      break;
      // return "final";
    }
    preVal = ret;
    console.info("output:", ret);
  }
  return "biu";
}

const it = watchRequests();

for (let i = 0; i < 6; i++) {
  const r = it.next(i);
  console.info("r:", r);
}

输出：
xx
yy
r: { value: 2, done: false }
r: { value: 'geek', done: false }
output: 1
yy
r: { value: 3, done: false }
r: { value: 'geek', done: false }
r: { value: 'biu', done: true }
r: { value: undefined, done: true }
原理是一样的，得到了预期的结果。

参考：
深入浅出 ES6（三）：生成器 Generators