关于generator:理解-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