ES6 Generators系列：

ES6 Generators基本概念

深入研究ES6 Generators

ES6 Generators的異步應用

ES6 Generators并發(fā)

　　如果你還不知道什么是ES6 generators，請看我的前一篇文章“ES6 Generators基本概念” 。如果你已經(jīng)對它有所了解，本文將帶你深入了解ES6 generators的一些細節(jié)。

?

錯誤處理

　　ES6 generators設計中最牛逼的部分之一就是generator函數(shù)內(nèi)部的代碼是同步的，即使在generator函數(shù)外部控制是異步進行的。

　　也就是說，你可以使用任何你所熟悉的錯誤處理機制來簡單地在generator函數(shù)中處理錯誤，例如使用try..catch機制。

　　來看一個例子：

function *foo() {try {var x = yield 3;console.log( "x: " x ); // 有可能永遠也不會運行到這兒！ }catch (err) {console.log( "Error: " err );} }

　　盡管函數(shù)會在yield 3表達式的位置暫停任意長的時間，但是如果有錯誤被發(fā)回generator函數(shù)，try..catch依然會捕獲該錯誤！你可以嘗試在異步回調(diào)中調(diào)用上面的代碼。

　　那么，如何才能將錯誤精準地發(fā)回給generator函數(shù)呢？

var it = foo();var res = it.next(); // { value:3, done:false }// 這里我們不調(diào)用next(..)方法，而直接拋出一個異常： it.throw( "Oops!" ); // Error: Oops!

　　這里我們使用了另一個方法throw(..)，它會在generator函數(shù)暫停的位置拋出一個錯誤，然后try..catch語句會捕獲這個錯誤！

　　注意：如果你通過throw(..)方法向generator函數(shù)拋出一個錯誤，但是該generator函數(shù)中并沒有try..catch語句來捕獲該錯誤，那么這個錯誤會被傳回來（如果這個錯誤沒有被其它代碼捕獲，則會被當作一個未處理的異常向上拋出）。所以：

function *foo() { }var it = foo(); try {it.throw( "Oops!" ); } catch (err) {console.log( "Error: " err ); // Error: Oops! }

　　顯然，反方向的錯誤處理也是可行的，看下面的代碼：

function *foo() {var x = yield 3;var y = x.toUpperCase(); // 可能會引發(fā)類型錯誤！ yield y; }var it = foo();it.next(); // { value:3, done:false }try {it.next( 42 ); // 42沒有toUpperCase()方法 } catch (err) {console.log( err ); // toUpperCase()引發(fā)TypeError錯誤 }

?

Generators委托

　　你可以在一個generator函數(shù)體內(nèi)調(diào)用另一個generator函數(shù)，不是通過普通的方式實例化一個generator函數(shù)，實際上是將當前generator函數(shù)的迭代控制委托給另一個generator函數(shù)。我們通過關鍵字yield *來實現(xiàn)。看下面的代碼：

function *foo() {yield 3;yield 4; }function *bar() {yield 1;yield 2;yield *foo(); // yield *將當前函數(shù)的迭代控制委托給另一個generator函數(shù)foo()yield 5; }for (var v of bar()) {console.log( v ); } // 1 2 3 4 5

　　注意這里我們依然推薦yield *foo()這種寫法，而不用yield* foo()，我在前一篇文章中也提到過這一點（推薦使用function *foo(){}而不用function* foo(){}）。事實上，在很多其它的文章和文檔中也都采用了前者，這種寫法會讓你的代碼看起來更清晰一些。

　　我們來看一下上面代碼的運行原理。在for..of循環(huán)遍歷中，通過隱式調(diào)用next()方法將表達式yield 1和yield 2的值返回，這一點我們在前一篇文章中已經(jīng)分析過了。在關鍵字yield *的位置，程序?qū)嵗⒌刂莆薪o另一個generator函數(shù)foo()。一旦通過yield *將迭代控制從*bar()委托給*foo()（只是暫時性的），for..of循環(huán)將通過next()方法遍歷foo()，因此表達式yield 3和yield 4將對應的值返回給for..of循環(huán)。當對*foo()的遍歷結束后，委托控制又重新回到之前的那個generator函數(shù)，所以表達式yield 5返回了對應的值。

　　上面的代碼很簡單，只是通過yield表達式輸出值。當然，你完全可以不通過for..of循環(huán)而手動通過next(..)方法并傳入相應的值來進行遍歷，這些傳入的值也會通過yield *關鍵字傳遞給對應的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

　　雖然這里我們只展示了一級委托，但理論上可以有任意多級委托，就是說上例中的generator函數(shù)*foo()中還可以有yield *表達式，從而將控制進一步委托給另外的generator函數(shù)，一級一級傳遞下去。

　　還有一點就是yield *表達式允許接收被委托的generator函數(shù)的return返回值。

function *foo() {yield 2;yield 3;return "foo"; // 字符串"foo"會被返回給yield *表達式 }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()表達式，程序?qū)⒖刂莆薪ogenerator函數(shù)*foo()，當函數(shù)foo()執(zhí)行完畢后，通過return語句將值（字符串"foo"）返回給yield *表達式，然后在bar()函數(shù)中，這個值最終被賦值給變量v。

　　Yield和yield *之間有個很有趣的區(qū)別：在yield表達式中，接收的值是由隨后的next(..)方法傳入的參數(shù)，但是在yield *表達式中，它接收的是被委托的generator函數(shù)中return語句返回的值（此時通過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()中的try..catch捕獲 // foo caught: Uh oh! it.next(); // { value:undefined, done:true } --> 注意這里不會出現(xiàn)錯誤！ // bar caught: Oops!

　　在上面的代碼中，throw("Uh oh!")方法拋出一個錯誤，該錯誤被yield *委托的generator函數(shù)*foo()中的try..catch所捕獲。同樣地，* foo()中的throw "Oops!"語句將錯誤拋回給*bar()，然后被*bar()中的try..catch捕獲。如果錯誤沒有被捕獲到，則會繼續(xù)向上拋出。

?

總結

　　從代碼語義層面來看，generator函數(shù)是同步執(zhí)行的，這意味著你可以在yield語句中使用try..catch來處理錯誤。另外，generator遍歷器還有一個throw(..)方法，可以在其暫停的地方拋出一個錯誤，這個錯誤也可以被generator函數(shù)內(nèi)部的try..catch捕獲。

　　關鍵字yield *允許你在當前的generator函數(shù)內(nèi)部委托并遍歷另一個generator函數(shù)。我們可以將參數(shù)通過yield *傳入到被委托的generator函數(shù)體中，當然，錯誤信息也會通過yield *被傳回來。

　　到目前為止我們還有一個最基本的問題沒有回答，那就是如何在異步模式中使用generator函數(shù)。前面我們看到的所有對generator函數(shù)的遍歷都是同步執(zhí)行的。

　　關鍵是要構造一種機制，能夠使generator函數(shù)在暫停的時候啟動一個異步任務，然后在異步任務結束時恢復generator函數(shù)的執(zhí)行（通過調(diào)用next()方法）。我們將在下一篇文章中探討在generator函數(shù)中創(chuàng)建這種異步控制的各種方法。敬請關注！

更多專業(yè)前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的深入研究ES6 Generators的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。