es6 generator函式的非同步程式設計

2022-06-21 00:00:16 字數 1555 閱讀 9030

es6 generator函式,我們都知道asycn和await是generator函式的語法糖,那麼genertaor怎麼樣才能實現asycn和await的功能呢?

1.thunk函式    將函式替換成乙個只接受**函式作為引數的單引數函式

/*

thunk 函式替換的不是表示式,而是多引數函式,將其替換成乙個只接受**函式作為引數的單引數函式。

*//*

注 fn 傳入的是乙個函式,傳入乙個函式形成的方法,傳入引數,最後傳入callback

在經過兩次函式呼叫後,該函式就換成乙個只接受**函式作為引數的單引數函式 */

var thunk = function

(fn)

}}

2.generator非同步程式設計的示例

/*

非同步執行方法

*/function

timeout(ms,val) ,ms)

})}function *fn()

使用while去讓上面的generator函式自執行

/*

res.value本身是個非同步的promise方法,如果幾個promise 有關聯那麼這樣就不行了

*/var f =fn();

var res =f.next();

while(!res.done) )

res =f.next();

}

在瀏覽器可知列印的結果,並不是順序的,1 3 是同以事件輸出的,2是最後輸出的

我們也可以使用promise巢狀使其按順序輸出,但是這種並不好,因為可能不知道具體有幾個yield,巢狀的方式寫的不好看

var f =fn();

var res =f.next();

res.value.then((val)=>).then((val)=>).then((val)=>)

我們定義乙個generator自執行器(注為什麼要提thunk函式,timeout已經經過thunk類似的封裝了)

/*

寫乙個適合generator的執行器

*/function *gn()

//按順序輸出 1 2 3

/*傳入要執行的gen

*//*

其實迴圈遍歷所有的yeild (函式的遞迴)

根絕next返回值中的done判斷是否執行到最後乙個,

如果是最後乙個則跳出去

*/function

run(fn)

/*result.value 為promise

*/result.value.then(val=>)

}/*呼叫上乙個next方法

*/next();

}run(gn)

上述輸出結構,分別是 1 2 3 ,間隔時間 2s 3s 2s

雖然已經有async和await這樣的generator的語法糖了,但是我們還是需了解以下他們的本質。相信您了解了本質,掌握asycn和await更不在話下

文章參考位址,阮一峰老師的  generator 函式的非同步應用 

ES6 generator 函式詳解

generator是es6的新特性,通過yield關鍵字,可以讓函式的執行流掛起,那麼便為改變執行流程提供了可能。function main 使用以上語法就可以宣告乙個generator,注意main是乙個函式 判斷是否為generator function isgen fn generator的構...

ES6 Generator函式的非同步應用

多個執行緒互相協作,完成非同步任務。yield命令表示執行到此處,執行權將交給其他協程,也就是說,yield命令是非同步兩個階段的分界線。協程遇到yield命令就暫停,等到執行權返回,再從暫停的地方繼續往後執行。function asyncjob function gen x var g gen 1...

ES6 Generator 生成器 函式

es6 新引入了 generator 函式,可以通過 yield 關鍵字,把函式的執行流掛起,為改變執行流程提供了可能,從而為非同步程式設計提供解決方案。基本用法 generator 有兩個區分於普通函式的部分 其中 用來表示函式為 generator 函式,yield 用來定義函式內部的狀態。fu...