ES6: generator进阶实例+源码分析:

• 可以看出通过yield的暂停是同步调用, 可以解决回调地狱, 但是不属于链式调用
• 返回值是一个generator封装返回的对象
• 若在yield的下一步用yield的返回值,需要在next调用时传入
• 第一阶段暂停前的用的参数, 也就是第一next调用时用到值,需要实例化的时候传入,不是在next的传入
• generator 产生的 iterator， 可以用next，在函数外部往 generator 里传数据， 又可以通过 throw 往里抛错, 需要捕捉catch捕捉处理

1. generator 传参:

function* gy() {
  console.log("zero", zero, four)
  let one = yield "first"
  console.log("fisrt", one, five) // one若不再next中传入, 会没有值,是undefined
  let two = yield "second"
  console.log("second", two)
}
let zero = 0
let four = 4
let five = 5
let gen = gy(zero, four)  // 第一阶段暂停前的用的参数, 也就是第一next调用时用到值,需要实例化的时候传入,不是在next的传入
// 定义generator自行函数
 function autoGen(value) {
  const a = gen.next(value)
  console.log(a)
  if (!a.done) {
    autoGen(a.value, five)
  }
} 
autoGen()

2. generator 抛错 :

function* createGenerator() {
  let first = yield 1;
  let second;
  try {
    second = yield first + 2;
  } catch (ex) {
    second = 6;
  }
  yield second + 3;
}
let iterator = createGenerator();                 
console.log(iterator.next());                   // "{ value: 1, done: false }"
console.log(iterator.next(4)); 
console.log(iterator.throw(new Error("Boom"))); // "{ value: 9, done: false }" 正常next不传值: "{ value: Nan, done: false }"
console.log(iterator.next());                   // "{ value: undefined, done: true }"

解析:

1. 第三次调用 iterator.throw(new Error("Boom") 往generator 往抛入错误，函数内部在上次停止处即 yield first + 2 接收信息，抛出错误。但是被catch了
2. 若不进行catch将会报错,影响下一步执行
3. next() 和 throw() 都可以让 iterator 继续执行下去，不同的是后者会是以抛出错误的方式让 iterator 继续执行的,需要catch处理

3. generator return

function* createGenerator() {
  yield 1;
  return;
  yield 2;
  yield 3;
}
let returnGenertor = createGenerator();
console.log(returnGenertor.next());  // "{ value: 1, done: false }"
console.log(returnGenertor.next());  // "{ value: undefined, done: true }"

解析:

1. return 语句， 功能上与一般函数的 return 没太大区别，都会阻止 return 之后的语句执行。
2. return 后有值，会被计入本次迭代的结果中:

function* createGenerator() {
  yield 1;
  return 2;
  yield 3;
}
let returnGenertor2 = createGenerator();
console.log(returnGenertor2.next());  // "{ value: 1, done: false }"
console.log(returnGenertor2.next());  // "{ value: 2, done: true }"
console.log(returnGenertor2.next());  // "{ value: undefined, done: true }"

解释:

1. return 改变generator状态, 阻断yield的执行
2. 本次return值会返回给value

4. gennerator 委托

function* createNumberIterator() {
  yield 1;
  yield 2;
}
function* createColorIterator() {
  yield "red";
  yield "green";
}
function* createCombinedIterator() {
  yield* createNumberIterator();
  yield* createColorIterator();
  yield true;
}

var iterator = createCombinedIterator();

console.log(iterator.next()); // "{ value: 1, done: false }"
console.log(iterator.next()); // "{ value: 2, done: false }"
console.log(iterator.next()); // "{ value: "red", done: false }"
console.log(iterator.next()); // "{ value: "green", done: false }"
console.log(iterator.next()); // "{ value: true, done: false }"
console.log(iterator.next()); // "{ value: undefined, done: true }"

解析:

// 1. 委托的语法, 用 yield* 类似 三点运算符 (...) 遍历展开 generator实例内部,以实现next的调用

5. Generator 委托 + return :

function* createNumberIterator() {
  yield 1;
  yield 2;
  return 3;
}
function* createRepeatingIterator(count) {
  for (let i = 0; i < count; i++) {
    yield "repeat";
  }
}
function* createCombinedIterator() {
  let result = yield* createNumberIterator();
  yield* createRepeatingIterator(result);
}
var iterator = createCombinedIterator();
console.log(iterator.next()); // "{ value: 1, done: false }"
console.log(iterator.next()); // "{ value: 2, done: false }"
console.log(iterator.next()); // "{ value: "repeat", done: false }"
console.log(iterator.next()); // "{ value: "repeat", done: false }"
console.log(iterator.next()); // "{ value: "repeat", done: false }"
console.log(iterator.next()); // "{ value: undefined, done: true }"

解释:

1. 在委托里面, return不会改变委托主的generator的返回值
2. 在委托里面, return的值将直接返回给什么变量,直接使用

let iterator = function *() {
  yield *['a', 'b', 'c']
}

let gen = iterator()

console.log(gen.next())
console.log(gen.next())
console.log(gen.next())


for(let item of iterator()) {
  console.log(item);
}

运行结果:

{ value: 'a', done: false }
{ value: 'b', done: false }
{ value: 'c', done: false }
a
b
c

解析:

// 1. 涉及iterator(对象迭代器)的遍历
// 2. for...in 遍历的可迭代对象的可迭代值

6. Genarator 与异步promise:

const asyncWork = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('asyncWorkPromise')
    resolve(6)
  }, 500)
})

run(function* () {
  let value = yield asyncWork;
  console.log(value)
  value = yield value.then(res => { console.log(res) });
  console.log(value)
});

// 自动运行generator函数
function run(taskDef) {

  // 创建并保存 iterator，留到后面使用
  let task = taskDef();

  let result = task.next();

  // 递归地执行 `next`
  function step() {
    // 如果没完的话
    if (!result.done) {
      result = task.next(result.value);
      step();
    }
  }
  // 开始处理
  step();
}

运行结果:

Promise {  }
Promise {  }
asyncWorkPromise
6

解析:

// 1. generator是同步编译执行的, 但是promise的异步函数,还是回加入回调,晚于同步编译

一、 重点: generator 实现原理: (后续更新....)

二、没看懂 => 去看参考资料:

面试: 怎么往 Generator 里抛个错？ => jeyvie(掘金)

三、对你有帮助,请关注...