Generator
如果没有babel等环境也可以在线体验
可以在http://www.es6fiddle.net/ OR https://babeljs.io/repl/ 在线编译ES6
Generator 函数是协程在 ES6 的实现,最大特点就是可以交出函数的执行权(即暂停执行)。
带有星星的函数就是Generator
function* gen(x){....}
generator的关键字是yield和next yield关键字只能在带有星星的函数中使用
yield x+2; //yield的意思是产出 这里表示生产 x+2 这个值
而调用g.next() 则会一直执行到yield函数之前(也包括yield语句)或者说函数执行将会在yield 这句话这里卡住, 直到有个next()调用
来个最简单的例子
function* gen(){
yield 1;
yield 2;
}
var g0 = gen();
console.log(g0.next()); //{"value":1,"done":false} 返回的是一个对象 包括yield后面的结果 以及这个函数是否执行完毕
console.log(g0.next());
console.log(g0.next());
//执行结果
// {"value":1,"done":false}
// {"value":2,"done":false}
// {"done":true}
再来个复杂一点的, 深刻理解一下yield的执行过程
var y = 'heheh';
function* gen(x) {
console.log('start');
//因为第一句就是yield 所以函数到这里若没有调用 g.next()是没有执行的
//第一次调用 g.next() 则执完到第一个yield 之前的语句 以及计算需要yield的值
//也就是第一次调用 g.next() 执行了 第一句log('start) 和 yield x+2
y = yield x + 2;
//yield的意思是产出 这里表示生产 x+2 这个值
//看起来好像把 yield产出的值赋值给了y 实际上不是
//y的值是在下一次(也就是第二次调用的时候由 g.next() 传入的)
console.log('2nd');
yield 2333;
//第二次调用 g.next() 执行到第二个yield语句这里
// console.log('3rd');
// return y;
}
var g = gen(1);//此时并没有执行
console.log(g.next());
console.log('y is '+ y); //y仍是最初始的值
//输出
//start
// { value: 3, done: false }
//g.next().value 的结果是 yield后的值
console.log(g.next('haYYY')); // {"value":2333,"done":false}
console.log('y is '+ y); // y is haYYY
//第三次调用 整个函数执行完毕
console.log(g.next());
//输出的结果包括
//3rd
//{"value":"haYYY","done":true} //第三次调用next() 其value就是*函数的返回值(因为已经木有yield语句了)
console.log('g is ',g); //{}
g = gen(1) 实际上这个函数没有执行
直到g.next()的时候才真正执行
我传入的x是2 所以这里yield x+2 实际上是 yield 3;
然后暂停了
第一个next 开始执行 语句一行一行的执行直到遇到一个yield停止
所以第一个得到yield 的结果 { value: 3, done: false }
那么y呢 y的值是 3 吗?
不是的 y的值是下一个next传入的值
刚才说到了第一个next就执行到 yield 3 这里
后来又 g.next('y') 这里传入了一个参数 'y'
这个字符串就是 yield x+1 这个表达式的返回值
第n个 next的参数 就是 第 n-1 个 yield的返回值
所以如果你在第一个next() 就传值的话 是没有意义的
PS 一个generator对象有n句 yield 总需要n+1句next() 才能走完整个流程
如何用Generator来实现异步呢
实际上就是把异步的函数放在 yield 关键字之后
yield后面可以接的对象有 function, promise, generator, array, object
另外需要借助co的支持
搬运https://cnodejs.org/topic/542953d42ca9451e1bf3c251
那么就可以像同步操作那样的写法来写异步函数
co(...) 使用时应向co传入一个generator对象
var co = require('co');
co(function* (){
var now = Date.now();
yield delay800;
console.log(Date.now() - now);
});
function delay800(cb) {
setTimeout(cb, 800);
}
这个例子的感受可能不明显 有了co和generator, 数据查询甚至可以变成这样
co(function *(){
var rs = yield db.query('select url from xxx');
rs.forEach(rs){
var content = yield getUrl(rs.url);
...
}
})();
co的原理
co的作用是可以使异步的函数放在 yield关键字之后 然后整个异步流程的代码写法可以像同步函数一样
并不是实现了一个generator
观察使用co的代码 co接受一个参数 该参数是一个generator函数
co(generator){ ... }
再看一般generator的调用 在一个generator函数执行后返回一个对象g 通过g.next()不断调用下一个函数
所以co要做的事情 就是接受generator 并且通过每一次next()的返回值判断是否执行完毕来看是否需要继续调用 g.next()
下面是co最简单的实现
co(function* (){
var now = Date.now();
yield delay800; //yield后面应该接一个函数对象
yield delay500;
console.log(Date.now() - now);
});
function delay800(callRecurence) {
setTimeout(callRecurence, 800);
}
function delay500(callRecurence){
setTimeout(function(){
//some async ...
callRecurence();
},500)
};
function co(generator) {
var gen = generator();
function next(err, result) {
if(err){
return fn(err);
}
var step = gen.next(result); //{value: fn , done: false}
if (!step.done) {//没有执行完毕 继续next
//执行异步函数 step.value 就是yield后的异步函数
//next 就是当前next(err,result)函数 通过递归的方式不断调用next达到多次调用 gen.next()
step.value(next);
} else {
// console.log('done!');
}
}
next();
}
Async
Async可以让你像使用同步函数一样来使用异步
await 后面是异步函数 该函数应当返回一个Promise
await只能存在于有async修饰的函数中
async function getAsyncRs(name) {
var symbol = await asyncFun1(name);
console.log(symbol);
var stockPrice = await asyncFun2(symbol);
return stockPrice;
}
getAsyncRs('goog').then(function(result) {
console.log(result);
});
function asyncFun1(name) {
return new Promise(function(resolve) {
setTimeout(function() {
resolve('async1' + name);
}, 500);
});
}
function asyncFun2(name) {
return new Promise(function(resolve) {
setTimeout(function() {
resolve('async222' + name);
}, 1000);
});
}