如何理解Generator
為什么要用generator
在前端開發(fā)過程中我們經(jīng)常需要先請求后端的數(shù)據(jù),再用拿來的數(shù)據(jù)進行使用網(wǎng)頁頁面渲染等操作,然而請求數(shù)據(jù)是一個異步操作,而我們的頁面渲染又是同步操作,這里ES6中的generator就能發(fā)揮它的作用,使用它可以像寫同步代碼一樣寫異步代碼。下面是一個例子,先忽略下面的寫法,后面會詳細說明。如果你已經(jīng)理解generator基礎可以直接跳過這部分和語法部分,直接看深入理解的部分。
function *foo() {// 請求數(shù)據(jù)var data = yield makeAjax('http://www.example.com');render(data); } 復制代碼在等待數(shù)據(jù)的過程中會繼續(xù)執(zhí)行其他部分的代碼,直到數(shù)據(jù)返回才會繼續(xù)執(zhí)行foo中后面的代碼,這是怎么實現(xiàn)的那?我們都知道js是單線程的,就是說我們不可能同時執(zhí)行兩段代碼,要實現(xiàn)這種效果,我們先來猜想下(ps:當然后面我都看過了,這里只是幫助大家理解,帶著問題去看),我們來假設有一個“王杖”(指代cpu的執(zhí)行權),誰拿到這個“王杖”,誰就可以做自己想做的事,現(xiàn)在代碼執(zhí)行到foo我們現(xiàn)在拿著“王杖”然后向服務器請求數(shù)據(jù),現(xiàn)在數(shù)據(jù)還沒有返回,我們不能干等著。作為王我們有著高尚的馬克思主義思想,我們先把自己的權利交出去,讓下一個需要用的人先用著,當然前提是要他們約定好一會兒有需要,再把“王杖”還給我們。等數(shù)據(jù)返回之后,我們再把我們的“王杖”要回來,就可以繼續(xù)做我們想做的事情了。 如果你理解了這個過程,那么恭喜你,你已經(jīng)基本理解了generator的運行機制,我這么比喻雖然有些過程不是很貼切,但基本是這么個思路。更多的東西還是向下看吧。
generator語法
generator函數(shù)
在用generator之前,我們首先要了解它的語法。在上面也看到過,它跟函數(shù)聲明很像,但后面有多了個*號,就是function *foo() { },當然也可以這么寫function* foo() { }。這里兩種寫法沒有任何區(qū)別,全看個人習慣,這篇文章里我會用第一種語法。現(xiàn)在我們按這種語法聲明一個generator函數(shù),供后面使用。
function *foo() {} 復制代碼yield
到目前為止,我們還什么也干不了,因為我們還缺少了一個重要的老伙計yield。yield翻譯成漢語是產(chǎn)生的意思。yield會讓我們跟在后面的表達式執(zhí)行,然后交出自己的控制權,停在這里,直到我們調(diào)用next()才會繼續(xù)向下執(zhí)行。這里新出現(xiàn)了next我們先跳過,先說說generator怎么執(zhí)行。先看一個例子。
function *foo() {var a = yield 1 + 1;var b = yield 2 + a;console.log(b); }var it = foo(); it.next(); it.next(2); it.next(4); 復制代碼下面我們來逐步分析,首先我們定義了一個generator函數(shù)foo,然后我們執(zhí)行它foo(),這里跟普通函數(shù)不同的是,它執(zhí)行完之后返回的是一個迭代器,等著我們自己卻調(diào)用一個又一個的yield。怎么調(diào)用那,這就用到我們前面提到的next了,它能夠讓迭代器一個一個的執(zhí)行。好,現(xiàn)在我們調(diào)用第一個it.next(),函數(shù)會從頭開始執(zhí)行,然后執(zhí)行到了第一個yield,它首先計算了1 + 1,嗯,然后停了下來。然后我們調(diào)用第二個it.next(2),注意我這里傳入了一個2作為next函數(shù)的參數(shù),這個2傳給了a作為它的值,你可能還有很多其他的疑問,我們詳細的后面再說。接著來,我們的it.next(2)執(zhí)行到了第二個yield,并計算了2 + a由于a是2所以就變成了2 + 2。第三步我們再調(diào)用it.next(4),過程跟上一步相同,我們把b賦值為4繼續(xù)向下執(zhí)行,執(zhí)行到了最后打印出我們的b為4。這就是generator執(zhí)行的全部的過程了。現(xiàn)在弄明白了yield跟next的作用,回到剛才的問題,你可能要問,為什么要在next中傳入2和4,這里是為了方便理解,我手動計算了1 + 1和2 + 2的值,那么程序自己計算的值在哪里?是next函數(shù)的返回值嗎,帶著這個疑問,我們來看下面一部分。
next
next的參數(shù)
next可以傳入一個參數(shù),來作為上一次yield的表達式的返回值,就像我們上面說的it.next(2)會讓a等于2。當然第一次執(zhí)行next也可以傳入一個參數(shù),但由于它沒有上一次yield所以沒有任何東西能夠接受它,會被忽略掉,所以沒有什么意義。
next的返回值
在這部分我們說說next返回值,廢話不多說,我們先打印出來,看看它到底是什么,你可以自己執(zhí)行一下,也可以直接看我執(zhí)行的結果。
function *foo() {var a = yield 1 + 1;var b = yield 2 + a;console.log(b); }var it = foo(); console.log(it.next()); console.log(it.next(2)); console.log(it.next(4)); 復制代碼執(zhí)行結果:
{ value: 2, done: false } { value: 4, done: false } 4 { value: undefined, done: true } 復制代碼看到這里你會發(fā)現(xiàn),yield后面的表達式執(zhí)行的結果確實返回了,不過是在返回值的value字段中,那還有done字段使用來做什么用的那。其實這里的done是用來指示我們的迭代器,就是例子中的it是否執(zhí)行完了,仔細觀察你會發(fā)現(xiàn)最后一個it.next(4)返回值是done: true的,前面的都是false,那么最后一個打印值的undefined又是什么那,因為我們后面沒有yield了,所以這里沒有被計算出值,那么怎么讓最后一個有值那,很簡單加個return。我們改寫下上面的例子。
function *foo() {var a = yield 1 + 1;var b = yield 2 + a;return b + 1; }var it = foo(); console.log(it.next()); console.log(it.next(2)); console.log(it.next(4)); 復制代碼執(zhí)行結果:
{ value: 2, done: false } { value: 4, done: false } { value: 5, done: true } 復制代碼最后的next的value的值就是最終return返回的值。到這里我們就不再需要手動計算我們的值了,我們在改寫下我們的例子。
function *foo() {var a = yield 1 + 1;var b = yield 2 + a;return b + 1; }var it = foo(); var value1 = it.next().value; var value2 = it.next(value1).value; console.log(it.next(value2)); 復制代碼大功告成!這些基本上就完成了generator的基礎部分。但是還有更多深入的東西需要我們進一步挖掘,看下去,相信你會有收獲的。
深入理解
前兩部分我們學習了為什么要用generator以及generator的語法,這些都是基礎,下面我們來看點不一樣的東西,老規(guī)矩先帶著問題才能更有目的性的看,這里先提出幾個問題:
- 怎樣在異步代碼中使用,上面的例子都是同步的啊
- 如果出現(xiàn)錯誤要怎么進行錯誤的處理
- 一個個調(diào)用next太麻煩了,能不能循環(huán)執(zhí)行或者自動執(zhí)行那
迭代器
進行下面所有的部分之前我們先說一說迭代器,看到現(xiàn)在,我們都知道generator函數(shù)執(zhí)行完返回的是一個迭代器。在ES6中同樣提供了一種新的迭代方式for...of,for...of可以幫助我們直接迭代出每個的值,在數(shù)組中它像這樣。
for (var i of ['a', 'b', 'c']) {console.log(i); }// 輸出結果 // a // b // c 復制代碼下面我們用我們的generator迭代器試試
function *foo() {yield 1;yield 2;yield 3;return 4; }// 獲取迭代器 var it = foo();for(var i of it) {console.log(i); }// 輸出結果 // 1 // 2 // 3 復制代碼現(xiàn)在我們發(fā)現(xiàn)for...of會直接取出我們每一次計算返回的值,直到done: true。這里注意,我們的4沒有打印出來,說明for...of迭代,是不包括done為true的時候的值的。
下面我們提一個新的問題,如果在generator中執(zhí)行generator會怎么樣?這里我們先認識一個新的語法yield *,這個語法可以讓我們在yield跟一個generator執(zhí)行器,當yield遇到一個新的generator需要執(zhí)行,它會先將這個新的generator執(zhí)行完,再繼續(xù)執(zhí)行我們當前的generator。這樣說可能不太好理解,我們看代碼。
function *foo() {yield 2;yield 3;yield 4; }function * bar() {yield 1;yield *foo();yield 5; }for ( var v of bar()) {console.log(v); } 復制代碼這里有兩個generator我們在bar中執(zhí)行了foo,我們使用了yield *來執(zhí)行foo,這里的執(zhí)行順序會是yield 1,然后遇到foo進入foo中,繼續(xù)執(zhí)行foo中的yield 2直到foo執(zhí)行完畢。然后繼續(xù)回到bar中執(zhí)行yield 5所以最后的執(zhí)行結果是:
1 2 3 4 5 復制代碼異步請求
我們上面的例子一直都是同步的,但實際上我們的應用是在異步中,我們現(xiàn)在來看看異步中怎么應用。
function request(url) {makeAjaxCall(url, function(response) {it.next(response);}) }function *foo() {var data = yield request('http://api.example.com');console.log(JSON.parse(data)); }var it = foo(); it.next(); 復制代碼這里又回到一開頭說的那個例子,異步請求在執(zhí)行到y(tǒng)ield的時候交出控制權,然后等數(shù)據(jù)回調(diào)成功后在回調(diào)中交回控制權。所以像同步一樣寫異步代碼并不是說真的變同步了,只是異步回調(diào)的過程被封裝了,從外面看不到而已。
錯誤處理
我們都知道在js中我們使用try...catch來處理錯誤,在generator中類似,如果在generator內(nèi)發(fā)生錯誤,如果內(nèi)部能處理,就在內(nèi)部處理,不能處理就繼續(xù)向外冒泡,直到能夠處理錯誤或最后一層。
內(nèi)部處理錯誤:
// 內(nèi)部處理 function *foo() {try {yield Number(4).toUpperCase();} catch(e) {console.log('error in');} }var it = foo(); it.next();// 運行結果:error in 復制代碼外部處理錯誤:
// 外部處理 function *foo() {yield Number(4).toUpperCase(); }var it = foo(); try {it.next(); } catch(e) {console.log('error out'); }// 運行結果:error out 復制代碼在generator的錯誤處理中還有一個特殊的地方,它的迭代器有一個throw方法,能夠?qū)㈠e誤丟回generator中,在它暫停的地方報錯,再往后就跟上面一樣了,如果內(nèi)部能處理則內(nèi)部處理,不能內(nèi)部處理則繼續(xù)冒泡。
內(nèi)部處理結果:
function *foo() {try {yield 1;} catch(e) {console.log('error', e);}yield 2;yield 3; }var it = foo(); it.next(); it.throw('oh no!');// 運行結果:error oh no! 復制代碼外部處理結果:
function *foo() {yield 1;yield 2;yield 3; }var it = foo(); it.next(); try {it.throw('oh no!'); } catch (e) {console.log('error', e); }// 運行結果:error oh no! 復制代碼根據(jù)測試,發(fā)現(xiàn)迭代器的throw也算作一次迭代,測試代碼如下:
function *foo() {try {yield 1;yield 2;} catch (e) {console.log('error', e);}yield 3; }var it = foo(); console.log(it.next()); it.throw('oh no!'); console.log(it.next());// 運行結果 // { value: 1, done: false } // error oh no! // { value: undefined, done: true } 復制代碼當用throw丟回錯誤的時候,除了try中的語句,迭代器迭代掉了yield 3下次再迭代就是,就是最后結束的值了。錯誤處理到這里就沒有了,就這么點東西^_^。
自動運行
generator能不能自動運行?當然能,并且有很多這樣的庫,這里我們先自己實現(xiàn)一個簡單的。
function run(g) {var it = g();// 利用遞歸進行迭代(function iterator(val) {var ret = it.next(val);// 如果沒有結束if(!ret.done) {// 判斷promiseif(typeof ret.value === 'object' && 'then' in ret.value) {ret.value.then(iterator);} else {iterator(ret.value);}}})(); } 復制代碼這樣我們就能自動處理運行我們的generator了,當然我們這個很簡單,沒有任何錯誤處理,如何讓多個generator同時運行,這其中涉及到如何進行控制權的轉(zhuǎn)換問題。我寫了一個簡單的執(zhí)行器Fo,其中包含了Kyle Simpson大神的一個ping-pong的例子,感興趣的可以看下這里是傳送門,當然能順手star一下就更好了,see you next article ~O(∩_∩)O~。
參考鏈接
- The Basics Of ES6 Generators
- Diving Deeper With ES6 Generators
- Going Async With ES6 Generators
- Getting Concurrent With ES6 Generators
總結
以上是生活随笔為你收集整理的如何理解Generator的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: linux常用命令之lsof 、nets
- 下一篇: Unity3D游戏-愤怒的小鸟游戏源码和