[本文参考地址来至阮一峰的网络日志]www.ruanyifeng.com/blog/2015/0…)
Generator 函数最大特点就是可以交出函数的执行权（即暂停执行）。
- 此函数名之前要加星号，以示区别。 Generator 函数就是一个异步任务的容器。异步操作需要暂停的地方，都用 yield 语句注明
function* demo(x){
var y = yield x + 2;
return y;
}
- 声明一个变量 = 调用完Generator 函数之后,会返回一个内部指针（demo即遍历器），
demo.next()会指向第一个遇到的yield语句。Generator 函数执行它不会返回结果，返回的是指针对象。第一次调用指针demo 的next方法,会移动内部指针即执行异步任务的第一段,指向第一个遇到的 yield 语句，执行到 x + 2 为止。 - next 方法的作用是分阶段执行 Generator 函数。每次调用 next 方法，会返回一个对象，表示当前阶段的信息（ value 属性和 done 属性）
- value 属性是 yield 语句后面表达式的值，表示当前阶段的值；done 属性是一个布尔值，表示 Generator 函数是否执行完毕，即是否还有下一个阶段。
var d = demo(1);
d.next() // { value: 3, done: false }
d.next() // { value: undefined, done: true }
Generator 函数每次next(),都是执行一次遇到的yield
function* demo(x){
var y = yield x + 2;
var y1 = yield y + 100;
}
var d = demo(1);
var res = d.next() // {value: 3, done: false}
d.next(res.value); // {value: 103, done: false}
- 变量
res为第一个遇到的yield语句，返回的对象。由于第二个yield语句有用到前一个语句的返回对象，所以在第二次.next()中我们要把前一次的value值传进去
Generator 函数执行一个异步操作
- Generator 函数封装了一个异步操作，先调用一个远程接口，然后从 JSON 格式的数据解析信息
- 使用
next方法，执行异步任务的第一阶段，fetch回的是一个 Promise 对象，因此要用 then 方法调用下一个next 方法。
fetch是一个类似ajax的用途
function* demo(){
var url = 'https://api.github.com/users/github';
var res = yield fetch(url);
console.log(result.bio);
}
var d = demo();
var res = d.next();
res.value.then(function(data){
return data.json();
}).then(function(data){
d.next(data);
});
Generator 函数数据交换
- next 方法返回值的 value 属性，是 Generator 函数向外输出数据；next 方法还可以接受参数，这是向 Generator 函数体内输入数据
- 第二个 next 方法带有参数2，这个参数可以传入 Generator 函数，作为上个阶段异步任务的返回结果，被函数体内的变量 y 接收。因此，这一步的 value 属性，返回的就是2（变量 y 的值）
function* demo(x){
var y = yield x + 2;
return y;
}
var d = demo(1);
d.next() // { value: 3, done: false }
d.next(2) // { value: 2, done: true }
结语
前端react QQ群：
788023830----React/Redux - 地下老英雄前端交流 QQ群：
249620372----FRONT-END-JS前端（我们的宗旨是，为了加班，为了秃顶……，仰望大佬），希望小伙伴们加群一起学习
