JS co 函數(shù)庫的含義和用法實(shí)例總結(jié)
本文實(shí)例講述了JS co 函數(shù)庫的含義和用法。分享給大家供大家參考,具體如下:
繼續(xù)學(xué)習(xí)阮一峰老師異步編程四部曲之三:co
co在很早之前就聽超哥講過,說在node編程中大量用到,源碼很簡單,但是想法很強(qiáng)大。
讓我有空抓緊了解下,前一段時(shí)間弄離職的事情,跑來跑去累的夠嗆。
現(xiàn)在終于一切回歸正常了,還在拼命的適應(yīng)新公司的節(jié)奏。只能趁周末繼續(xù)學(xué)習(xí)了。
好了,不瞎扯了,回歸主題,前兩篇文章我們分別學(xué)習(xí)了 Generator 函數(shù)和 Thunk 方式的自動(dòng)執(zhí)行。
今天我們接著上次的思路學(xué)習(xí)使用 co 工具實(shí)現(xiàn) Generator 函數(shù)的自動(dòng)執(zhí)行。
再次拿出上一節(jié)的示例:
var fs = require(’fs’);var thunkify = require(’thunkify’);var readFile = thunkify(fs.readFile); var gen = function* (){ var r1 = yield readFile(’/etc/fstab’); console.log(r1.toString()); var r2 = yield readFile(’/etc/shells’); console.log(r2.toString());};
這段代碼用于讀取兩個(gè)文件,怎么使用 co 工具來實(shí)現(xiàn)自動(dòng)執(zhí)行呢?
很簡單:
var co = require(’co’);co(gen);
上面代碼中,只要把 Generator 函數(shù)傳入 co 函數(shù),就會(huì)自動(dòng)執(zhí)行。
co 函數(shù)返回一個(gè) Promise 對象,因此可以用 then 方法添加回調(diào)函數(shù),當(dāng) Generator 執(zhí)行結(jié)束就會(huì)觸發(fā)回調(diào):
co(gen).then(function (){ //success});
這么看起來的話好像和我們之前的 Thunk 方式差不多啊,只是把 run 函數(shù)名改成了 co
唯一的區(qū)別是多了一層 Promise 包裝,那么 co 和 Thunk 到底有什么區(qū)別呢?
正如我們的猜測一樣,co 其實(shí)是將之前的兩種自動(dòng)執(zhí)行方式(Thunk 和 Promise)結(jié)合到了一起,包裝成一個(gè)庫。
使用它的前提和比Thunk多了一種 Promise 的情況,也就是yield返回值必須是 Thunk 函數(shù)和 Promise 對象之一
實(shí)現(xiàn)原理:
之前我們在研究 Thunk 函數(shù)時(shí)的第一步是使用 thunkify 將 readFile 包裝成 Thunk 函數(shù):
今天我們研究 Promise 就需要把 readFile 包裝成 Promise 對象,看代碼:
var fs = require(’fs’); var readFile = function (fileName){ return new Promise(function (resolve, reject){ fs.readFile(fileName, function(error, data){ if (error) reject(error); resolve(data); }); });}; var gen = function* (){ var f1 = yield readFile(’/etc/fstab’); var f2 = yield readFile(’/etc/shells’); console.log(f1.toString()); console.log(f2.toString());};
接下來是我特別喜歡老師做的一件事,先用最原始的方式,手動(dòng)執(zhí)行一遍代碼。
在我們?nèi)粘i_發(fā)的過程中,也可以參考這種方式。當(dāng)邏輯復(fù)雜時(shí),不妨先用最直白的方式把它實(shí)現(xiàn),
然后再去發(fā)現(xiàn)里面的規(guī)則,去優(yōu)化重構(gòu)。又開始扯了,看一下手動(dòng)執(zhí)行的代碼:
var g = gen(); g.next().value.then(function(data){ g.next(data).value.then(function(data){ g.next(data); });});
手動(dòng)執(zhí)行其實(shí)就是用 then 方法,層層添加回調(diào)函數(shù)。理解了這一點(diǎn),就可以寫出一個(gè)自動(dòng)執(zhí)行器:
function run(gen){ var g = gen(); //開始執(zhí)行 function next(data){ var result = g.next(data); if (result.done) return result.value; result.value.then(function(data){ next(data); }); } next();}run(gen);
和Thunk函數(shù)的區(qū)別是,Thunk 函數(shù)在執(zhí)行成功后把 next 傳給 thunkify ,讓 thunkify 來幫忙執(zhí)行 next
這里的做法是吧 next 交給 Promise,promise 控制請求成功時(shí)執(zhí)行 next。區(qū)別只有這么一點(diǎn)。
分析了原理之后,我們來分析下co的源碼:
co 函數(shù)接受一個(gè) Generator 參數(shù),返回一個(gè) Promise 對象
function co(gen) { var ctx = this; return new Promise(function(resolve, reject) { });}
在返回的 Promise 對象里面,先檢查參數(shù) gen 是否為 Generator 函數(shù)。如果是,就執(zhí)行該函數(shù),得到一個(gè)內(nèi)部指針對象;
如果不是就返回,并將 Promise 對象的狀態(tài)改為 resolved 。
function co(gen) { var ctx = this; return new Promise(function(resolve, reject) { if (typeof gen === ’function’) gen = gen.call(ctx); if (!gen || typeof gen.next !== ’function’) return resolve(gen); });}
接著,co 對 next 方法進(jìn)行包裝,使異常能夠暴露出來:
function co(gen) { var ctx = this; return new Promise(function(resolve, reject) { if (typeof gen === ’function’) gen = gen.call(ctx); if (!gen || typeof gen.next !== ’function’) return resolve(gen); onFulfilled(); function onFulfilled(res) { var ret; try { ret = gen.next(res); } catch (e) { return reject(e); } next(ret); } });}
最后就是next方法了:
function next(ret) { if (ret.done) return resolve(ret.value); var value = toPromise.call(ctx, ret.value); if (value && isPromise(value)) return value.then(onFulfilled, onRejected); return onRejected(new TypeError(’You may only yield a function, promise, generator, array, or object, ’ + ’but the following object was passed: '’ + String(ret.value) + ’'’)); }});
next方法最主要的一行:
if (value && isPromise(value)) return value.then(onFulfilled, onRejected);
co的使用條件,每一次yield返回必須是Promise對象,當(dāng)promist處理成功時(shí)再次執(zhí)行onFulfilled
以此來達(dá)到自動(dòng)執(zhí)行的效果。
co 還支持并發(fā)的異步操作,yield 返回一個(gè)數(shù)組或者是支持遍歷的對象即可:
// 數(shù)組的寫法co(function* () { var res = yield [ Promise.resolve(1), Promise.resolve(2) ]; console.log(res); }).catch(onerror); // 對象的寫法co(function* () { var res = yield { 1: Promise.resolve(1), 2: Promise.resolve(2), }; console.log(res); }).catch(onerror);
至此,co 的自動(dòng)執(zhí)行原理我們已經(jīng)學(xué)習(xí)完成了,
其實(shí)本質(zhì)上不是很難,只是涉及到的模塊較多,思路比較靈活
對我的小容量大腦來說,現(xiàn)在的認(rèn)識還只到90%
所以這篇文章里面自己的思想比較少,更多的還是在復(fù)述老師的思路。
最后貼上原文的地址:co 函數(shù)庫的含義和用法
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具:http://tools.jb51.net/code/HtmlJsRun測試上述代碼運(yùn)行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題:《JavaScript常用函數(shù)技巧匯總》、《javascript面向?qū)ο笕腴T教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章:
1. HTML DOM setInterval和clearInterval方法案例詳解2. css代碼優(yōu)化的12個(gè)技巧3. CSS3實(shí)例分享之多重背景的實(shí)現(xiàn)(Multiple backgrounds)4. 使用純HTML的通用數(shù)據(jù)管理和服務(wù)5. 告別AJAX實(shí)現(xiàn)無刷新提交表單6. 低版本IE正常運(yùn)行HTML5+CSS3網(wǎng)站的3種解決方案7. CSS hack用法案例詳解8. css進(jìn)階學(xué)習(xí) 選擇符9. 使用css實(shí)現(xiàn)全兼容tooltip提示框10. Vue+elementUI下拉框自定義顏色選擇器方式
