js yield


meikidd 發布在meikidd2015年5月6日view:3397
在文章任何區域雙擊擊即可給文章添加【評注】!浮到評注點上可以查看詳情。

首先請原諒我的標題黨(●—●),tj 大神的 co 模塊源碼200多行,顯然不是我等屌絲能隨便幾行代碼就能重寫的。只是當今大家都喜歡《7天學會xx語言》之類的速效仙丹,於是我也弄個類似的名字《7行代碼學會co模塊》來博眼球。

為了避免被拖出去彈小JJ,還是先放出所謂的 7 行代碼給大家壓壓驚:

function co(gen) { var it = gen(); var ret = it.next(); ret.value.then(function(res) { it.next(res); }); }

萬惡的回調

對前端工程師來說,異步回調是再熟悉不過了,瀏覽器中的各種交互邏輯都是通過事件回調實現的,前端邏輯越來越復雜,導致回調函數越來越多,同時 nodejs 的流行也讓 javascript 在后端的復雜場景中得到應用,在 nodejs 代碼中更是經常看到層層嵌套。

以下是一個典型的異步場景:先通過異步請求獲取頁面數據,然后根據頁面數據請求用戶信息,最后根據用戶信息請求用戶的產品列表。過多的回調函數嵌套,使得程序難以維護,發展成萬惡的回調

$.get('/api/data', function(data) { console.log(data); $.get('/api/user', function(user) { console.log(user); $.get('/api/products', function(products) { console.log(products) }); }); });

異步流程控制

  • 最原始異步流程的寫法,就是類似上面例子里的回調函數嵌套法,用過的人都知道,那叫一個酸爽。

  • 后來出現了 Promise ,它極大提高了代碼的可維護性,消除了萬惡的回調嵌套問題,並且現在已經成為 ES6 標准的一部分。

$.get('/api/data') .then(function(data) { console.log(data); return $.get('/api/user'); }) .then(function(user) { console.log(user); return $.get('/api/products'); }) .then(function(products) { console.log(products); });
  • 之后在 nodejs 圈出現了 co 模塊,它基於 ES6 的 generator 和 yield ,讓我們能用同步的形式編寫異步代碼。
co(function *() { var data = yield $.get('/api/data'); console.log(data); var user = yield $.get('/api/user'); console.log(user); var products = yield $.get('/api/products'); console.log(products); });
  • 以上的 Promise 和 generator 最初創造它的本意都不是為了解決異步流程控制。其中 Promise 是一種編程思想,用於“當xx數據准備完畢,then執行xx動作”這樣的場景,不只是異步,同步代碼也可以用 Promise。而 generator 在 ES6 中是迭代器生成器,被 TJ 創造性的拿來做異步流程控制了。真正的異步解決方案請大家期待 ES7 的 async 吧!本文以下主要介紹 co 模塊。

co 模塊

上文已經簡單介紹了co 模塊是能讓我們以同步的形式編寫異步代碼的 nodejs 模塊,主要得益於 ES6 的 generator。nodejs >= 0.11 版本可以加 --harmony 參數來體驗 ES6 的 generator 特性,iojs 則已經默認開啟了 generator 的支持。

要了解 co ,就不得不先簡單了解下 ES6 的 generator 和 iterator。

Iterator

Iterator 迭代器是一個對象,知道如何從一個集合一次取出一項,而跟蹤它的當前序列所在的位置,它提供了一個next()方法返回序列中的下一個項目。

var lang = { name: 'JavaScript', birthYear: 1995 }; var it = Iterator(lang); var pair = it.next(); console.log(pair); // ["name", "JavaScript"] pair = it.next(); console.log(pair); // ["birthYear", 1995] pair = it.next(); // A StopIteration exception is thrown

乍一看好像沒什么奇特的,不就是一步步的取對象中的 key 和 value 嗎,for ... in也能做到,但是把它跟 generator 結合起來就大有用途了。

Generator

Generator 生成器允許你通過寫一個可以保存自己狀態的的簡單函數來定義一個迭代算法。 Generator 是一種可以停止並在之后重新進入的函數。生成器的環境(綁定的變量)會在每次執行后被保存,下次進入時可繼續使用。generator 字面上是“生成器”的意思,在 ES6 里是迭代器生成器,用於生成一個迭代器對象。

function *gen() { yield 'hello'; yield 'world'; return true; }

以上代碼定義了一個簡單的 generator,看起來就像一個普通的函數,區別是function關鍵字后面有個*號,函數體內可以使用yield語句進行流程控制。

var iter = gen(); var a = iter.next(); console.log(a); // {value:'hello', done:false} var b = iter.next(); console.log(b); // {value:'world', done:false} var c = iter.next(); console.log(c); // {value:true, done:true}

當執行gen()的時候,並不執行 generator 函數體,而是返回一個迭代器。迭代器具有next()方法,每次調用 next() 方法,函數就執行到yield語句的地方。next() 方法返回一個對象,其中value屬性表示 yield 關鍵詞后面表達式的值,done 屬性表示是否遍歷結束。generator 生成器通過nextyield的配合實現流程控制,上面的代碼執行了三次 next() ,generator 函數體才執行完畢。

co 模塊思路

從上面的例子可以看出,generator 函數體可以停在 yield 語句處,直到下一次執行 next()。co 模塊的思路就是利用 generator 的這個特性,將異步操作跟在 yield 后面,當異步操作完成並返回結果后,再觸發下一次 next() 。當然,跟在 yield 后面的異步操作需要遵循一定的規范 thunks 和 promises。

yieldables

The yieldable objects currently supported are: - promises - thunks (functions) - array (parallel execution) - objects (parallel execution) - generators (delegation) - generator functions (delegation)

7行代碼

再看看文章開頭的7行代碼:

function co(gen) { var it = gen(); var ret = it.next(); ret.value.then(function(res) { it.next(res); }); }

首先生成一個迭代器,然后執行一遍 next(),得到的 value 是一個 Promise 對象,Promise.then() 里面再執行 next()。當然這只是一個原理性的演示,很多錯誤處理和循環調用 next() 的邏輯都沒有寫出來。

下面做個簡單對比: 傳統方式,sayhello是一個異步函數,執行helloworld會先輸出"world"再輸出"hello"

function sayhello() { return Promise.resolve('hello').then(function(hello) { console.log(hello); }); } function helloworld() { sayhello(); console.log('world'); } helloworld();

輸出

> "world" > "hello"

co 的方式,會先輸出"hello"再輸出"world"

function co(gen) { var it = gen(); var ret = it.next(); ret.value.then(function(res) { it.next(res); }); } function sayhello() { return Promise.resolve('hello').then(function(hello) { console.log(hello); }); } co(function *helloworld() { yield sayhello(); console.log('world'); });

輸出

> "hello" > "world"

消除回調金字塔

假設sayhello/sayworld/saybye是三個異步函數,用真正的 co 模塊就可以這么寫:

var co = require('co'); co(function *() { yield sayhello(); yield sayworld(); yield saybye(); });

輸出

> "hello" > "world" > "bye"

參考

《es7-async》 https://github.com/jaydson/es7-async 
《Generator 函數的含義與用法》 http://www.ruanyifeng.com/blog/2015/04/generator.html 
《Iterator》 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Iterator


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM