一
function* fn() {
console.log(1);
//暂停!
yield;
//调用next方法继续执行
console.log(2);
}
var iter = fn();
iter.next(); //1
iter.next(); //2
1、函数生成器特点是函数名前面有一个‘*’
2、通过调用函数生成一个控制器
3、调用next()方法开始执行函数
4、遇到yield函数将暂停
5、再次调用next()继续执行函数
二
消息传递
除了暂停和继续执行外,生成器同时支持传值。
用法如下:
function* fn() {
var a = yield 'hello';
yield;
console.log(a);
}
var iter = fn();
var res = iter.next();
console.log(res.value); //hello
iter.next(2);
iter.next(); //2</pre>
可以看到,yield后面有一个字符串,在第一次调用next时,暂停在这里且返回给了iter.next()。
而暂停的地方是一个赋值语句,需要一个变量给a,于是next()方法中传了一个参数2替换了yield,最后打印a得到了2。
三
异步应用
通过yield来实现异步控制流程:
function fn(a, b) {
//假设这是一个ajax请求
ajax('url' + a + b, function(data) {
//数据请求到会执行it.next
it.next(data);
});
}
//这里是函数生成器
function* g() {
//当异步操作完毕yield会得到值
//这里会自动继续执行
var text = yield fn(a, b);
console.log(text);
}
var it = g();
it.next();
这里做了简化处理,忽略了一些错误处理。
确实很巧妙,通过回调函数来继续执行函数生成器,然后得到数据。
然而,直接在回调里拿数据不行么。书上讲,这样异步操作符合大脑思考模式,函数的执行看起来‘同步’了。
四
yield+promise
重点来了。
先回忆之前promise对异步的实现:
function request(url) {
return new Promise(function(resolve, reject) {
//ajax异步请求完成会调用resolve决议
ajax(url, resolve);
});
}
request('url').then(function(res) {
console.log(res);
})
流程大概是调用函数传入url,由于会立即决议,触发ajax请求函数。异步请求完调用调用回调函数,也就是resolve,然后根据返回的resolve调用then方法获取数据。
现在将yield与promise综合在一起:
```switf
function foo(x) {
return request('url' + x);
}
//等待promise决议值返回
function* fn() {
var text = yield foo(1);
}
var it = fn();
//返回一个promise
var p = it.next().value;
//对promise处理
p.then(function(text) {
//这里继续执行生成器
it.next(text);
})
封装
可以将上面的yield+promise进行封装,得到下面的函数:
function run(gen) {
//获取除了生成器本身以外的参数
var args = [].slice.call(arguments, 1),
it;
//it = main()
it = gen.apply(this, args);
return Promise.resolve().then(function handleNext(value) {
//第一次启动无value
var next = it.next(value);
return (function handleResult(next) {
//执行完毕返回
if (next.done) {
return next.value;
} else {
//如果还有就决议next.value传给handleNext
return Promise.resolve(next.value).then(handleNext, function(err) {});
}
})(next);
});
}
//这是一个函数生成器
function* main() {
//...
};
//该调用会自动异步运行直到结束
run(main);
如果有两个异步操作,获取到返回的两个数据后,再进行第三个异步操作,可以这么做:
function foo() {
var p1 = request('url1'),
p2 = request('url2');
//每一个request异步请求完成后会自动解除yield
var r1 = yield p1,
r2 = yield p2;
var r3 = yield request('url3' + r1 + r2);
console.log(r3);
}