前端异步解决方案-4.1（generator）

摘要：前言终于开始写了，离这个系列的终结又进了一步。想要看更深度解析的朋友可以移步漫话与异步第三话化异步为同步这里面谈及了的底层实现及的用法。用法在我的理解中，最大的特点就是可以让函数在特定的地方停下，等待被唤醒后在函数内部环境中继续执行。

终于开始写generator了，离这个系列的终结又进了一步。其实generator我还处在会用但是不理解原理的状态，但是知识不总结，不记录的话容易忘记，所以我还是把现在的一点心得记录下来。等到以后有了更深的理解再回来补充。
想要看更深度解析generator的朋友可以移步漫话JavaScript与异步·第三话——Generator：化异步为同步这里面谈及了generator的底层实现及generator的用法。是我看过的文章中自认为解释的最好的一篇，而且篇幅也不长，建议大家去看一看。

根据一贯的作风，我们先尝试自己实现generator
尝试ing............
好了尝试完了，实现不了，老老实实的学习generator的用法吧。

在我的理解中，generator最大的特点就是可以让函数在特定的地方停下，等待被唤醒后在函数内部环境中继续执行。我们结合代码来看一看：
注释：【1】Iterator Object对象：参考 Iterator 文章比较长，但是如果只是想要了解什么是Iterator Object的话看完第一小节就足够了

//输出分割线的函数，感兴趣的可以自行百度如何设置console.log的样式
function cut_off(color) {
  console.log("%c------------------------------------------","color:"+color+";font-size:20px");
}

//* 为generator函数的标识，如果我们想要创建一个generator函数就必须在function后面加上*
function* generator() {
  let num1, num2;
  num1 = 123;
  console.log("num1", num1, "num2", num2);
  //yield就是该函数内部暂停的地方，暂停的同时会把yield后面的值返回出去
  yield num1;
  num2 = 456;
  console.log("num1", num1, "num2", num2);
  yield num2;
  console.log("num1", num1, "num2", num2);
  return "end"
}

console.log("generator defined");
//函数返回一个Iterator Object对象；
// 但是与普通函数不同的是，这个时候函数并不执行函数内部的代码
let g = generator();
console.log("g defined");
cut_off("red");

console.log("g.next() run 1");
//开始执行函数内部的代码，并且遇在到yield的时候返回 yield后面的值
console.log(g.next());
cut_off("red");

console.log("g.next() run 2");
//从上次执行完的地方执行，并且遇在到yield的时候返回 yield后面的值
console.log(g.next());
cut_off("red");

console.log("g.next() run 3");
//从上次执行完的地方执行，这次是最后一次有值的返回，done的状态会变为true
console.log(g.next());
cut_off("red");

console.log("g.next() run 4");
//已经执行完成之后再次被调用，永远返回{value:undefined, done: true}
console.log(g.next());
cut_off("red");

console.log("g.next() run 5");
//已经执行完成之后再次被调用，永远返回{value:undefined, done: true}
console.log(g.next());

贴上一张代码和运行结果的对比图辅助大家理解

希望大家看到这里已经理解了generator的基本用法，但是这个东西确实有点难，所以我放出联系方式
我有空的时候可以一起探讨一下

接下来我要讲generator最重要的第二个特性，我们可以通过.next(value)为yeild赋值（这是不准确的说法，但是我们可以这么理解，方便我们使用generator），还是贴代码：

function* generator() {
  //第一次调用.next()是启动了这个函数一直运行到下一个yield的位置
  let num1, num2;
  num1 = 123;
  console.log("num1", num1, "num2", num2);
  num2 = yield num1;/*1.由于运算的顺序，js会先计算右边的值，也就是在num2被赋值之前，函数就停止运行了
                      2.第二次调用.next(value)的时候，value被next传入了yield的位置
                      3.程序继续运行，value被赋值给了num2
                     */
  console.log("num1", num1, "num2", num2);
  return num2
}

let g = generator();

console.log("g.next() run 1");
console.log(g.next());
cut_off("red");

console.log("g.next(789) run 2");
//从上次执行完的地方执行，并且将789传入函数内部
console.log(g.next(789));

贴出函数和运行结果的对比图，辅助大家理解.next(value)为yeild赋值（该说法并不准确）

generator的基础学习到这里就能尝试实际使用了，接下来我们尝试让generator在异步中大展身手吧，话不多说上代码;

//模拟异步请求
let request = function (sucF, errF) {
  if ((sucF && typeof sucF !== "function") || (errF && typeof errF !== "function")) {
    throw new Error("传入参数必须为函数")
  }
  setTimeout(function () {
    let data = parseInt(Math.random() * 100);
    if (data < 90 && sucF) {
      sucF(data)
    } else if (errF) {
      errF("本次异步失败了")
    }
  }, 100)
};

function* generator() {
  let num1, num2;
  num1 = yield request((data) => {
    g.next(data)                 //这个地方可能有些难以理解，为什么在g被创建之前，就被使用了。
  }, err => {                   //这个问题可以看注释【1】来辅助理解
    console.error(err);
    g.return(err)               //跳过所有的yield,return直接返回err
  });
  console.log("num1", num1, "num2", num2);
  num2 = yield  request((data) => {
    g.next(data)
  }, err => {
    console.error(err);
    g.return(err)             //跳过所有的yield,return直接返回err
  });
  console.log("num1", num1, "num2", num2);
  return num2
}

let g = generator();
//启动
g.next();

注释【1】：为了解释g为什么可以在被创建之前就‘被调用’

//其实在运行generator的时候generator内部的代码块并没有开始运行，而是返回了一个Iterator对象，所以大家可以这样简单理解
//function* generator 相当于 
function generator(){
    let obj = {};
    obj.next=function(){
        console.log(g);
    };
    return obj
}
//这样在调用generator()的时候，g不会被使用
let g = generator();
//这个时候g被调用了，但是在上一行代码中，g已经被定义了，所以没有问题，不会报错
g.next()

这篇文章暂时写到这里，因为我的页面开始卡了，所以我把generator和promise结合的用法放到下一篇文章中去；(ps:今天就会写出来的)