浅谈ES6中的generator生成器（异步回调可变为同步代码）

首先是官网的介绍：
generator（生成器）是ES6标准引入的新的数据类型。一个generator看上去像一个函数，但可以返回多次。

官网地址.基础用法讲解

，因为项目中用的vue的，写法：

* B() {
      yield getSupplierList().then(() => {
        console.log(1);
      }); 
      
      yield getSupplierList().then(() => {
        console.log(2);
      });
       yield console.log(3)
       yield getSupplierList().then(() => {
        console.log(4);
      });
      yield console.log(5)
	 }

此处是调用generator方法之处

created() {
	const g = this.B();
    g.next().value.then(() => {//第一个接口返回的promise
      g.next().value.then(() => {//第二个接口返回的promise
        g.next();	//第三个代码执行
        g.next().value.then(() => {//第四个接口返回的promise
          g.next();//第五个代码执行
        });
      });
    });
}

我们记录一下console.log(g.next())五次的结果，为下面优化做准备：

> { value: Promise { <pending> }, done: false }
> { value: Promise { <pending> }, done: false }
> {value: 3, done: false}
> { value: Promise { <pending> }, done: false }
> {value: 5, done: true}

himmel(gen) {
      const item = gen.next();//拿到每个yield 对象返回的数据（其中包括value和done）
      //判断done执行是否将执行结束
      if (item.done) {
        return item.value;
      }
	  //递归 判断value类型是否是promise
      const { value, done } = item;
      if (value instanceof Promise) {
        value.then(e => this.himmel(gen));
      } else {
        this.himmel(gen);
      }
    },

下面执行封装的方法：

created() {
	this.himmel();
},

发现输出顺序，依旧是1、2、3、4、5。
好了，现在就完成了异步回调变成伪同步执行代码。有更优方法欢迎大家一些讨论，谢谢。