前端非同步解決方案-4.1(generator+promise)
前言
終於開始寫generator了,離這個系列的終結又進了一步。其實generator我還處在會用但是不理解原理的狀態,但是知識不總結,不記錄的話容易忘記,所以我還是把現在的一點心得記錄下來。等到以後有了更深的理解再回來補充。
想要看更深度解析generator的朋友可以移步 漫話JavaScript與非同步·第三話——Generator:化非同步為同步 這裡面談及了generator的底層實現及generator的用法。是我看過的文章中自認為解釋的最好的一篇,而且篇幅也不長,建議大家去看一看。
實現
根據一貫的作風,我們先嚐試自己實現generator
嘗試ing............
好了嘗試完了,實現不了,老老實實的學習generator的用法吧。
用法
在我的理解中,generator最大的特點就是可以讓函式在特定的地方停下,等待被喚醒後在函式內部環境中繼續執行。我們結合程式碼來看一看:
註釋:【1】Iterator Object物件:參考 Iterator 文章比較長,但是如果只是想要了解什麼是Iterator Object的話看完第一小節就足夠了
//輸出分割線的函式,感興趣的可以自行百度如何設定console.log的樣式 function cut_off(color) { console.log("%c------------------------------------------","color:"+color+";font-size:20px"); } //* 為generator函式的標識,如果我們想要建立一個generator函式就必須在function後面加上* function* generator() { let num1, num2; num1 = 123; console.log("num1", num1, "num2", num2); //yield就是該函式內部暫停的地方,暫停的同時會把yield後面的值返回出去 yield num1; num2 = 456; console.log("num1", num1, "num2", num2); yield num2; console.log("num1", num1, "num2", num2); return "end" } console.log("generator defined"); //函式返回一個Iterator Object物件; // 但是與普通函式不同的是,這個時候函式並不執行函式內部的程式碼 let g = generator(); console.log("g defined"); cut_off("red"); console.log("g.next() run 1"); //開始執行函式內部的程式碼,並且遇在到yield的時候返回 yield後面的值 console.log(g.next()); cut_off("red"); console.log("g.next() run 2"); //從上次執行完的地方執行,並且遇在到yield的時候返回 yield後面的值 console.log(g.next()); cut_off("red"); console.log("g.next() run 3"); //從上次執行完的地方執行,這次是最後一次有值的返回,done的狀態會變為true console.log(g.next()); cut_off("red"); console.log("g.next() run 4"); //已經執行完成之後再次被呼叫,永遠返回{value:undefined, done: true} console.log(g.next()); cut_off("red"); console.log("g.next() run 5"); //已經執行完成之後再次被呼叫,永遠返回{value:undefined, done: true} console.log(g.next());
貼上一張程式碼和執行結果的對比圖