这篇文章旨在帮你真正相识Generator，文章较长，不过假如能花时间耐烦看完，相信你已能够完整邃晓generator
为何要用generator
在前端开辟历程当中我们常常须要先要求后端的数据，再用拿来的数据举行运用网页页面衬着等操纵，然则要求数据是一个异步操纵，而我们的页面衬着又是同步操纵，这里ES6中的generator就能够发挥它的作用，运用它能够像写同步代码一样写异步代码。下面是一个例子，先疏忽下面的写法，背面会细致申明。假如你已邃晓generator基础能够直接跳过这部份和语法部份，直接看深切邃晓的部份。
function *foo() {
// 要求数据
var data = yield makeAjax('http://www.example.com');
render(data);
}在守候数据的历程当中会继承实行其他部份的代码，直到数据返回才会继承实行foo中背面的代码，这是怎样完成的那？我们都晓得js是单线程的，就是说我们不能够同时实行两段代码，要完成这类效果，我们先来猜测下，我们来假设有一个“王杖”（指代cpu的实行权），谁拿到这个“王杖”，谁就能够做本身想做的事，如今代码实行到foo我们如今拿着“王杖”然后向服务器要求数据，如今数据还没有返回，我们不能干等着。作为王我们有着高贵的马克思主义头脑，我们先把本身的权益交出去，让下一个须要用的人先用着，固然条件是要他们商定好一会儿有须要，再把“王杖”还给我们。等数据返回以后，我们再把我们的“王杖”要返来，就能够继承做我们想做的事变了。
假如你邃晓了这个历程，那末祝贺你，你已基础邃晓了generator的运转机制，我这么比方虽然有些历程不是很贴切，但基础是这么个思绪。更多的东西照样向下看吧。
generator语法
generator函数
在用generator之前，我们起首要相识它的语法。在上面也看到过，它跟函数声明很像，但背面有多了个*号，就是function *foo() { }，固然也能够这么写function* foo() { }。这里两种写法没有任何区分，全看个人习气，这篇文章里我会用第一种语法。如今我们按这类语法声明一个generator函数，供背面运用。
function *foo() {
}yield
到目前为止，我们还什么也干不了，因为我们还缺少了一个主要的老伙计yield。yield翻译成汉语是发作的意义。yield会让我们跟在背面的表达式实行，然后交出本身的控制权，停在这里，直到我们挪用next()才会继承向下实行。这里新涌现了next我们先跳过，先说说generator怎样实行。先看一个例子。
function *foo() {
var a = yield 1 + 1;
var b = yield 2 + a;
console.log(b);
}
var it = foo();
it.next();
it.next(2);
it.next(4);下面我们来逐渐剖析，起首我们定义了一个generator函数foo，然后我们实行它foo()，这里跟一般函数差别的是，它实行完以后返回的是一个迭代器，等着我们本身却挪用一个又一个的yield。怎样挪用那，这就用到我们前面提到的next了，它能够让迭代器一个一个的实行。好，如今我们挪用第一个it.next()，函数会从头开始实行，然后实行到了第一个yield，它起首盘算了1 + 1，嗯，然后停了下来。然后我们挪用第二个it.next(2)，注重我这里传入了一个2作为next函数的参数，这个2传给了a作为它的值，你能够另有许多其他的疑问，我们细致的背面再说。接着来，我们的it.next(2)实行到了第二个yield，并盘算了2 + a因为a是2所以就变成了2 + 2。第三步我们再挪用it.next(4)，历程跟上一步雷同，我们把b赋值为4继承向下实行，实行到了末了打印出我们的b为4。这就是generator实行的悉数的历程了。如今弄邃晓了yield跟next的作用，回到适才的题目，你能够要问，为何要在next中传入2和4，这里是为了轻易邃晓，我手动盘算了1 + 1和2 + 2的值，那末递次本身盘算的值在那里？是next函数的返回值吗，带着这个疑问，我们来看下面一部份。
next
next的参数
next能够传入一个参数，来作为上一次yield的表达式的返回值，就像我们上面说的it.next(2)会让a即是2。固然第一次实行next也能够传入一个参数，但因为它没有上一次yield所以没有任何东西能够接收它，会被疏忽掉，所以没有什么意义。
next的返回值
在这部份我们说说next返回值，空话不多说，我们先打印出来，看看它究竟是什么，你能够本身实行一下，也能够直接看我实行的效果。
function *foo() {
var a = yield 1 + 1;
var b = yield 2 + a;
console.log(b);
}
var it = foo();
console.log(it.next());
console.log(it.next(2));
console.log(it.next(4));实行效果：
{ value: 2, done: false }
{ value: 4, done: false }
4
{ value: undefined, done: true }看到这里你会发明，yield背面的表达式实行的效果确切返回了，不过是在返回值的value字段中，那另有done字段运用来做什么用的那。实在这里的done是用来指导我们的迭代器，就是例子中的it是不是实行完了，仔细观察你会发明末了一个it.next(4)返回值是done: true的，前面的都是false，那末末了一个打印值的undefined又是什么那，因为我们背面没有yield了，所以这里没有被盘算出值，那末怎样让末了一个有值那，很简朴加个return。我们改写下上面的例子。
function *foo() {
var a = yield 1 + 1;
var b = yield 2 + a;
return b + 1;
}
var it = foo();
console.log(it.next());
console.log(it.next(2));
console.log(it.next(4));实行效果：
{ value: 2, done: false }
{ value: 4, done: false }
{ value: 5, done: true }末了的next的value的值就是终究return返回的值。到这里我们就不再须要手动盘算我们的值了，我们在改写下我们的例子。
function *foo() {
var a = yield 1 + 1;
var b = yield 2 + a;
return b + 1;
}
var it = foo();
var value1 = it.next().value;
var value2 = it.next(value1).value;
console.log(it.next(value2));功德圆满！这些基础上就完成了generator的基础部份。然则另有更多深切的东西须要我们进一步发掘，看下去，相信你会有收成的。
深切邃晓
前两部份我们进修了为何要用generator以及generator的语法，这些都是基础，下面我们来看点不一样的东西，老例子先带着题目才更有目的性的看，这里先提出几个题目：
- 怎样在异步代码中运用，上面的例子都是同步的啊
- 假如涌现毛病要怎样举行毛病的处置惩罚
- 一个个挪用next太麻烦了，能不能轮回实行或许自动实行那
迭代器
举行下面一切的部份之前我们先说一说迭代器，看到如今，我们都晓得generator函数实行完返回的是一个迭代器。在ES6中一样供应了一种新的迭代体式格局for...of，for...of能够协助我们直接迭代出每一个的值，在数组中它像如许。
for (var i of ['a', 'b', 'c']) {
console.log(i);
}
// 输出效果
// a
// b
// c下面我们用我们的generator迭代器尝尝
function *foo() {
yield 1;
yield 2;
yield 3;
return 4;
}
// 猎取迭代器
var it = foo();
for(var i of it) {
console.log(i);
}
// 输出效果
// 1
// 2
// 3如今我们发明for...of会直接掏出我们每一次盘算返回的值，直到done: true。这里注重，我们的4没有打印出来，申明for...of迭代，是不包括done为true的时刻的值的。
下面我们提一个新的题目，假如在generator中实行generator会怎样？这里我们先熟悉一个新的语法yield *，这个语法能够让我们在yield跟一个generator实行器，当yield碰到一个新的generator须要实行，它会先将这个新的generator实行完，再继承实行我们当前的generator。如许说能够不太好邃晓，我们看代码。
function *foo() {
yield 2;
yield 3;
yield 4;
}
function * bar() {
yield 1;
yield *foo();
yield 5;
}
for ( var v of bar()) {
console.log(v);
}这里有两个generator我们在bar中实行了foo，我们运用了yield *来实行foo，这里的实行递次会是yield 1，然后碰到foo进入foo中，继承实行foo中的yield 2直到foo实行终了。然后继承回到bar中实行yield 5所以末了的实行效果是：
1
2
3
4
5异步要求
我们上面的例子一向都是同步的，但实际上我们的运用是在异步中，我们如今来看看异步中怎样运用。
function request(url) {
makeAjaxCall(url, function(response) {
it.next(response);
})
}
function *foo() {
var data = yield request('http://api.example.com');
console.log(JSON.parse(data));
}
var it = foo();
it.next();这里又回到一开首说的谁人例子，异步要求在实行到yield的时刻交出控制权，然后等数据回调胜利后在回调中交回控制权。所以像同步一样写异步代码并不是说真的变同步了，只是异步回调的历程被封装了，从表面看不到罢了。
毛病处置惩罚
我们都晓得在js中我们运用try...catch来处置惩罚毛病，在generator中相似，假如在generator内发作毛病，假如内部能处置惩罚，就在内部处置惩罚，不能处置惩罚就继承向外冒泡，直到能够处置惩罚毛病或末了一层。
内部处置惩罚毛病：
// 内部处置惩罚
function *foo() {
try {
yield Number(4).toUpperCase();
} catch(e) {
console.log('error in');
}
}
var it = foo();
it.next();
// 运转效果：error in外部处置惩罚毛病：
// 外部处置惩罚
function *foo() {
yield Number(4).toUpperCase();
}
var it = foo();
try {
it.next();
} catch(e) {
console.log('error out');
}
// 运转效果：error out在generator的毛病处置惩罚中另有一个特别的处所，它的迭代器有一个throw要领，能够将毛病丢回generator中，在它停息的处所报错，再今后就跟上面一样了，假如内部能处置惩罚则内部处置惩罚，不能内部处置惩罚则继承冒泡。
内部处置惩罚效果：
function *foo() {
try {
yield 1;
} catch(e) {
console.log('error', e);
}
yield 2;
yield 3;
}
var it = foo();
it.next();
it.throw('oh no!');
// 运转效果：error oh no!外部处置惩罚效果：
function *foo() {
yield 1;
yield 2;
yield 3;
}
var it = foo();
it.next();
try {
it.throw('oh no!');
} catch (e) {
console.log('error', e);
}
// 运转效果：error oh no!依据测试，发明迭代器的throw也算作一次迭代，测试代码以下：
function *foo() {
try {
yield 1;
yield 2;
} catch (e) {
console.log('error', e);
}
yield 3;
}
var it = foo();
console.log(it.next());
it.throw('oh no!');
console.log(it.next());
// 运转效果
// { value: 1, done: false }
// error oh no!
// { value: undefined, done: true }当用throw丢回毛病的时刻，除了try中的语句，迭代器迭代掉了yield 3下次再迭代就是，就是末了完毕的值了。毛病处置惩罚到这里就没有了，就这么点东西^_^。
自动运转
generator能不能自动运转？固然能，并且有许多如许的库，这里我们先本身完成一个简朴的。
function run(g) {
var it = g();
// 应用递归举行迭代
(function iterator(val) {
var ret = it.next(val);
// 假如没有完毕
if(!ret.done) {
// 推断promise
if(typeof ret.value === 'object' && 'then' in ret.value) {
ret.value.then(iterator);
} else {
iterator(ret.value);
}
}
})();
}如许我们就能够自动处置惩罚运转我们的generator了，固然我们这个很简朴，没有任何毛病处置惩罚，怎样让多个generator同时运转，这个中涉及到怎样举行控制权的转换题目。我写了一个简朴的实行器Fo，个中包含了Kyle Simpson大神的一个ping-pong的例子，感兴趣的能够看下这里是传送门，固然能随手star一下就更好了，see you next article ~O(∩_∩)O~。
