基本概念
Generator 是ES6的一种异步编程结局方案。
状态机 (封装了多个内部状态 ) 遍历器对象生成
function* helloWorldGenderator() {
yield 'hello';
yield 'world';
return 'ending';
}
var hw=helloWorldGenderator();
有两个状态 hw是指向一个内部状态对的指针对象
function* helloWorldGenderator() {
yield 'hello';
yield 'world';
return 'ending';
}
var hw=helloWorldGenderator();
console.log(hw.next()) //{done:false value:"hello"}
console.log(hw.next()) //{done:false value:"hello"}
console.log(hw.next()) //{done:true value:"hello"}
生成的遍历器之间彼此不受影响
function* g() {
var o=1;
yield o++;
yield o++;
yield o++;
}
var gen=g();
console.log(gen.next()) //1
var xx=g();
console.log(xx.next()) //1
console.log(gen.next()) //2
console.log(xx.next()) //2
当调用next() 方法的时候 从上一个yield开始执行 遇到yield就会暂停执行 并返回yield后边的值
使用 for of方法自动可以遍历 遍历器对象
function* g() {
yield 1;
yield 2;
yield 3;
yield 4;
yield 5;
return 6;
}
let a=g();
for(let i of a){
console.log(i) //1 2 3 4 5
}
实现菲薄齐纳函数
function* ff() {
let [prev,curr]=[0,1];
for(;;){
[prev,curr]=[curr,prev+curr];
console.log('---------')
yield curr;
}
}
for(let n of ff()){
if(n>100) break
console.log(n)
}
状态机
ES5版本的状态机
var ticking=true;
var clock=function () {
if(ticking){
console.log('Tick');
}else{
console.log('Tock');
}
ticking=!ticking
}
setInterval(clock,1000)
ES6版本的状态机
function* Clock () {
while (true){
console.log("111")
yield ;
console.log("222")
yield ;
}
}
var cc=Clock();
setInterval(function () {
cc.next()
},1000)
使用Generator函数实现异步操作
使用例子:在服务器端有3个文件 a.html b.html c.html 现在前端需要读到这三个文件的内容才可以继续执行操作。
$.get("a.json",function (data) {
console.log(data)
$.get("b.json",function (data) {
console .log(data)
$.get("c.json",function (data) {
console.log(data)
//执行前端代码
})
})
})
异步回调函数的地域
function request(url) {
$.get(url,function (response) {
it.next(response);
})
}
function* ajaxs () {
var i=0;
console.log(++i,yield request('a.json'))
console.log(++i,yield request('b.json'))
console.log(++i,yield request('c.json'))
}
var it=ajaxs();
it.next();
使用Generator实现了异步请求三个文件 。
使用Generator同步化异步函数的几个步骤
1、将异步代码的每一步都封装成一个普通的函数
2、定义一个生成器函数 把流程写进去
3、定义一个变量 赋值为遍历器对象生成器
4、变量名.next()