让 Generator 自启动

此前只是简单使用而没有真正的去研究 Generator,这次要好好折腾下这货。

异步编程

对于 jser 来说,异步非常熟悉了吧,但是真正理解异步的却不多,因为大部分人只知道回调。
随着js的快速发展,异步方案也层出不穷,从最开始的回调到Promise,再到Generator,然后到async/await。
甚至有人说 async/await 是异步的终极解决方案,我不敢直接赞同,只能说是目前最好的异步体验。
本篇先从 Generator 讲起,后序再详细说 async/await。

从回调开始

从最最经典的 ajax 请求开始今天的话题吧。
假如,我们要依次请求 url1, url2, url3 这3个地址。

1
2
3
4
5
6
7
$.get('url1', function(r1) {
$.get('url2', function(r2) {
$.get('url3', function(r3) {
console.log(r1, r2, r3);
});
});
});

一不小心就写成这样了。
如果你是 jQuery 粉的话,你可能会说也可以这样实现啊。

1
2
3
4
5
6
7
8
9
$.get('url1').then(function(r1) {
console.log(r1);
return $.get('url2');
}).then(function(r2) {
console.log(r2);
return $.get('url3');
}).then(function(r3) {
console.log(r3);
});

用 jQuery 的 Deferred 对象,类似 Promise 来规避回调地狱,看着确实平了,但体验并不是特别友好。

用 Generator 来和谐回调

Generator 的基础这里就不展开说了,直接说应用。

1
2
3
4
5
6
7
function* gen() {
var r1 = yield $.get('url1');
var r2 = yield $.get('url2');
var r3 = yield $.get('url3');

console.log(r1, r2, r3);
}

这是比较友好的异步方式,但是还有个至关重要的因素,怎么运行这个 Generator 是个问题。
直接手动 g.next() 运行那肯定不行,鬼知道有多少个 yield。
我们要实现一个启动器来运行它,并把 Promise 结果传给下一次next,这样就实现了 yield 接收值的功能。

先来实现一个最简陋的起动器。

1
2
3
4
5
6
7
8
9
10
function run(gen) {
var g = gen();

function next(d) {
var r = g.next(d);
r.done || r.value.then(function(d){ next(d) }); // 这个是关键,把值传回传
}

next();
}

然后我们只要一行代码。

1
run(gen);

Generator 就启动起来了,并且一直执行到 done 为 true 为止。

真实例子

打开 https://www.52tian.net/ 动漫网。非广告,确实没找到合适的测试站,凑合下吧。
然后把下面代码贴到控制台,看下结果。如果执行不了,请升级浏览器,本例在 chrome 51 下通过。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function* gen() {
var r1 = yield $.get('/json/anime/4126.htm');
var r2 = yield $.get('/json/anime/11129.htm');
var r3 = yield $.get('/json/anime/427.htm');

console.log([r1, r2, r3].join('\n'));
}

function run(gen) {
var g = gen();

function next(d) {
var r = g.next(d);
r.done || r.value.then(function(d){ next(d) }); // 这个是关键,把值传回传
}

next();
}

run(gen);

小结

可能你已经发现了,其实这就是 co 的原理,但 co 比这个例子严谨多了,而且api设计的也非常友好。
本篇到此也就结束了,利用 Generator 的 yield 功能实现参数回传,让代码看起来非常‘同步’,让异步体验变的更加友好。