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

文章还未写完，发布只是为了看排版和图片效果
前言
终于开始写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());
贴上一张代码和运行结果的对比图