原文地址:https://davidwalsh.name/es6-generators-dive
如果你对于 ES6 生成器不熟悉,请先阅读并试试“1. ES6 生成器基础知识”中的代码。在你觉得基础知识已经掌握之后,我们就可以开始更深入的学习了。
异常处理
ES6 生成器设计的最强大的部分之一,是生成器内部的代码从语义上来看是同步的,尽管其外部的迭代控制是异步进行的。
一个简单亦或复杂的说法是,你可以使用非常熟悉的错误处理技术——也就是 try..catch
机制。
例如:
function *foo() {
try {
var x = yield 3;
console.log( "x: " + x ); // 可能永远执行不到这里!
}
catch (err) {
console.log( "Error: " + err );
}
}
尽管函数会在表达式 yield 3
处暂停,并且会保持暂停状态任意时间,但只要有错误被传回到生成器,try..catch
仍然能够捕获!这就像是有了传统的回调函数的异步能力。:)
但是,一个错误是如何被传回到生成器的呢?
var it = foo();
var res = it.next(); // { value:3, done:false }
// 这里不再通过另一个 `next(..)` 调用来继续执行,
// 而是产生一个异常:
it.throw( "Oops!" ); // Error: Oops!
显然,反向的异常处理也是可以的:
function *foo() {
var x = yield 3;
var y = x.toUpperCase(); // 会产生一个 TypeError 异常!
yield y;
}
var it = foo();
it.next(); // { value:3, done:false }
try {
it.next( 42 ); // `42` 没有 `toUpperCase()` 方法
}
catch (err) {
console.log( err ); // TypeError (来自调用`toUpperCase()`)
}
委托生成器
另一个你想要做的,或许是在生成器函数的内部调用另一个生成器。我说的不是正常的调用方式,而是将迭代控制 委托到 另一个生成器。这么做,我们要使用 yield
关键字的一个变种:yield *
(“yield 星号”)。
示例:
function *foo() {
yield 3;
yield 4;
}
function *bar() {
yield 1;
yield 2;
yield *foo(); // `yield *` 将迭代控制委托给了 `foo()`
yield 5;
}
for (var v of bar()) {
console.log( v );
}
// 1 2 3 4 5
和在第一部分(使用 function *foo() { }
而非 function* foo() { }
形式)的理由相同,这里使用 yield *foo()
而不是其他文章或文档里的 yield* foo()
。我认为这样可以更准确和清晰地表明其目的。
接下来我们分解下上面的过程。yield 1
和 yield 2
将值直接返回给了 for..of
循环的(隐含的)next()
调用,这个我们已经知道了。
然后 yield*
出现了,这里是实际上是通过实例化了 foo()
然后跳转(yielding)了过去,这样 yield 3
和 yield 4
将值返回给了 for..of
循环。
一旦 yield*
完成,控制权就又回到了原来的生成器,最后调用了 yield 5
。
为了简单,这里只是把值都返回了。不过,当然也可以通过 next(..)
来手动调用并传入数据,将数据也会和预想中一样通过 yield*
委托传入:
function *foo() {
var z = yield 3;
var w = yield 4;
console.log( "z: " + z + ", w: " + w );
}
function *bar() {
var x = yield 1;
var y = yield 2;
yield *foo(); // `yield*` delegates iteration control to `foo()`
var v = yield 5;
console.log( "x: " + x + ", y: " + y + ", v: " + v );
}
var it = bar();
it.next(); // { value:1, done:false }
it.next( "X" ); // { value:2, done:false }
it.next( "Y" ); // { value:3, done:false }
it.next( "Z" ); // { value:4, done:false }
it.next( "W" ); // { value:5, done:false }
// z: Z, w: W
it.next( "V" ); // { value:undefined, done:true }
// x: X, y: Y, v: V
这里只演示了一层委托,但没有理由说 *foo()
不能再委托到另一个生成器,以及更多。
有个“技巧”是 yield
可以从委托生成器那里获取到一个返回值:
function *foo() {
yield 2;
yield 3;
return "foo"; // return value back to `yield*` expression
}
function *bar() {
yield 1;
var v = yield *foo();
console.log( "v: " + v );
yield 4;
}
var it = bar();
it.next(); // { value:1, done:false }
it.next(); // { value:2, done:false }
it.next(); // { value:3, done:false }
it.next(); // "v: foo" { value:4, done:false }
it.next(); // { value:undefined, done:true }
可以看到,yield *foo()
将迭代控制(下一个 next()
调用)委托出去,知道委托的生成器执行完毕,此时,foo()
的返回值(这里是字符串值 "foo")作为 yield *
表达式的值返回,然后被赋值给了局部变量 v
。
这是 yield
与 yield*
的一个有趣的差别:使用 yield
表达式,结果会在随后 next(..)
返回,但使用 yield*
表达式,获得的是委托生成器的返回值(因为 next(..)
返回的数据已传递给了委托生成器)。
可以在 yield*
委托上执行两个方向的异常处理(见前文):
function *foo() {
try {
yield 2;
}
catch (err) {
console.log( "foo caught: " + err );
}
yield; // 暂停
// 抛出异常
throw "Oops!";
}
function *bar() {
yield 1;
try {
yield *foo();
}
catch (err) {
console.log( "bar caught: " + err );
}
}
var it = bar();
it.next(); // { value:1, done:false }
it.next(); // { value:2, done:false }
it.throw( "Uh oh!" ); // 会在 `foo()` 内部被捕获
// foo caught: Uh oh!
it.next(); // { value:undefined, done:true } --> 没有异常!
// bar caught: Oops!
在上例中,throw("Uh oh!")
将异常通过 yield*
委托传递给了 *f00()
内部的 try..catch
。同样地,*foo()
内部的 throw "Oop!"
将异常传递给了 *bar()
,而后者通过另一个 try..catch
捕获了这个异常。如果没有捕获这两个异常,那么它们会按照期望的方式向上传递。
总结
生成器有着同步执行的语义,这意味可以通过 try..catch
来处理 yield
语句的错误。生成器迭代器还有一个 throw(..)
方法用于在暂停的位置抛出一个异常到生成器中,这也可以通过生成器内部的 try..catch
进行捕获。
yield*
使得可以将迭代控制从当前生成器委托到另一个生成器。yield*
的执行结果可以双向打通,这意味数据和错误都可以进行传递。
不过,到目前为止,有一个基本的问题还没有回答:生成器在异步代码模式上如何帮助我们?我们从这两篇文章看到的都是生成器函数的同步迭代。
关键在于构造一个机制,使得生成器可以暂停从而启动一个异步的任务,并等待异步任务结束后再继续(通过迭代器的 next()
调用)。在下一篇文章中,我们将探索通过生成器来创建异步控制的几种方法。请继续关注!
译注
有关生成器委托,文章中的情况是其中一种,对于 yield*
表达式来说,其接收的值只需要是支持 iterable
接口的对象即可,如数组、字符串。所以,其实也支持:
function* foo() {
yield* [1, 2, 3, 4, 5];
}
遍历上面的生成器函数得到的生成器对象,可以进一步得到数组的所有值。
参考:yield* - MDN