乐趣区

前端异步解决方案-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());
贴上一张代码和运行结果的对比图

退出移动版