今天就跟大家聊聊有關(guān)node中koa中間件機(jī)制的原理是什么,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結(jié)了以下內(nèi)容,希望大家根據(jù)這篇文章可以有所收獲。
創(chuàng)新互聯(lián)長(zhǎng)期為上千客戶提供的網(wǎng)站建設(shè)服務(wù),團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年,關(guān)注不同地域、不同群體,并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù);打造開(kāi)放共贏平臺(tái),與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為永昌企業(yè)提供專業(yè)的成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站,永昌網(wǎng)站改版等技術(shù)服務(wù)。擁有10余年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。
koa
koa是由express原班人馬打造的一個(gè)更小、更富有表現(xiàn)力、更健壯的web框架。
在我眼中,koa的確是比express輕量的多,koa給我的感覺(jué)更像是一個(gè)中間件框架,koa只是一個(gè)基礎(chǔ)的架子,需要用到的相應(yīng)的功能時(shí),用相應(yīng)的中間件來(lái)實(shí)現(xiàn)就好,諸如路由系統(tǒng)等。一個(gè)更好的點(diǎn)在于,express是基于回調(diào)來(lái)處理,至于回調(diào)到底有多么的不好,大家可以自行搜索來(lái)看。koa1基于的co庫(kù),所以koa1利用Generator來(lái)代替回調(diào),而koa2由于node對(duì)async/await的支持,所以koa2利用的是async/await。關(guān)于async以及co庫(kù)等,大家可以參考我之前寫過(guò)的一篇文章(理解async)。koa可以說(shuō)是一個(gè)各種中間件的架子,下面就來(lái)看一下koa對(duì)于中間件部分的實(shí)現(xiàn):
koa1的中間件
koa1主要利用的是Generator來(lái)實(shí)現(xiàn),一般來(lái)說(shuō),koa1的一個(gè)中間件大概是長(zhǎng)這個(gè)樣子的:
app.use(function *(next){ console.log(1); yield next; console.log(5); }); app.use(function *(next){ console.log(2); yield next; console.log(4); }); app.use(function *(){ console.log(3); });
這樣的輸出會(huì)是1, 2, 3, 4, 5,koa的中間件的實(shí)現(xiàn)主要依靠的是koa-compose:
function compose(middleware){ return function *(next){ if (!next) next = noop(); var i = middleware.length; // 組合中間件 while (i--) { next = middleware[i].call(this, next); } return yield *next; } } function *noop(){}
源碼非常的簡(jiǎn)單,實(shí)現(xiàn)的功能就是將所有的中間件串聯(lián)起來(lái),首先給倒數(shù)第一個(gè)中間件傳入一個(gè)noop作為其next,再將這個(gè)整理后的倒數(shù)第一個(gè)中間作為next傳入倒數(shù)第二個(gè)中間件,最終得到的next就是整理后的第一個(gè)中間件。說(shuō)起來(lái)比較復(fù)雜,畫圖來(lái)看:
實(shí)現(xiàn)的效果如同上圖,與redux需要實(shí)現(xiàn)的目標(biāo)類似,只要遇到了yield next就去執(zhí)行下一個(gè)中間件,利用co庫(kù)很容易將這個(gè)流程串聯(lián)起來(lái),下面來(lái)簡(jiǎn)單模擬下,中間件完整的實(shí)現(xiàn):
const middlewares = []; const getTestMiddWare = (loggerA, loggerB) => { return function *(next) { console.log(loggerA); yield next; console.log(loggerB); } }; const mid1 = getTestMiddWare(1, 4), mid2 = getTestMiddWare(2, 3); const getData = new Promise((resolve, reject) => { setTimeout(() => resolve('數(shù)據(jù)已經(jīng)取出'), 1000); }); function *response(next) { // 模擬異步讀取數(shù)據(jù)庫(kù)數(shù)據(jù) const data = yield getData; console.log(data); } middlewares.push(mid1, mid2, response); // 簡(jiǎn)單模擬co庫(kù) function co(gen) { const ctx = this, args = Array.prototype.slice.call(arguments, 1); return new Promise((reslove, reject) => { if (typeof gen === 'function') gen = gen.apply(ctx, args); if (!gen || typeof gen.next !== 'function') return resolve(gen); const baseHandle = handle => res => { let ret; try { ret = gen[handle](res); } catch(e) { reject(e); } next(ret); }; const onFulfilled = baseHandle('next'), onRejected = baseHandle('throw'); onFulfilled(); function next(ret) { if (ret.done) return reslove(ret.value); // 將yield的返回值轉(zhuǎn)換為Proimse let value = null; if (typeof ret.value.then !== 'function') { value = co(ret.value); } else { value = ret.value; } if (value) return value.then(onFulfilled, onRejected); return onRejected(new TypeError('yield type error')); } }); } // 調(diào)用方式 const gen = compose(middlewares); co(gen);
koa2的中間件
隨著node對(duì)于async/await的支持,貌似不需要再借助于co這種工具庫(kù)了,直接利用原生的就好,于是koa也做出了改變,來(lái)看目前的koa-compose:
function compose (middleware) { // 參數(shù)檢驗(yàn) return function (context, next) { // last called middleware # let index = -1 return dispatch(0) function dispatch (i) { if (i <= index) return Promise.reject(new Error('next() called multiple times')) index = i let fn = middleware[i] // 最后一個(gè)中間件的調(diào)用 if (i === middleware.length) fn = next if (!fn) return Promise.resolve() // 用Promise包裹中間件,方便await調(diào)用 try { return Promise.resolve(fn(context, function next () { return dispatch(i + 1) })) } catch (err) { return Promise.reject(err) } } } }
koa-compose利用了Promise,koa2的中間件的參數(shù)也有一個(gè)變?yōu)榱藘蓚€(gè),而且執(zhí)行下一個(gè)的中間件利用的是await next(),要達(dá)到與上面的示例代碼的相同效果,需要更改中間件的寫法:
const middlewares = []; const getTestMiddWare = (loggerA, loggerB) => async (ctx, next) => { console.log(loggerA); await next(); console.log(loggerB); }; const mid1 = getTestMiddWare(1, 4), mid2 = getTestMiddWare(2, 3); const response = async () => { // 模擬異步讀取數(shù)據(jù)庫(kù)數(shù)據(jù) const data = await getData(); console.log(data); }; const getData = () => new Promise((resolve, reject) => { setTimeout(() => resolve('數(shù)據(jù)已經(jīng)取出'), 1000); }); middlewares.push(mid1, mid2); // 調(diào)用方式 compose(middlewares)(null, response);
如何做到兼容
可以看到的是,koa1與koa2對(duì)于中間件的實(shí)現(xiàn)還是有著很多的不同的,將koa1的中間件直接拿到koa2下面來(lái)使用肯定是會(huì)出現(xiàn)錯(cuò)誤的,如何兼容這兩個(gè)版本也成了一個(gè)問(wèn)題,koa團(tuán)隊(duì)寫了一個(gè)包來(lái)是koa1的中間件可以用于koa2中,叫做koa-convert,先來(lái)看看這個(gè)包怎么使用:
function *mid3(next) { console.log(2, 'koa1的中間件'); yield next; console.log(3, 'koa1的中間件'); } convert.compose(mid3)
來(lái)看下這個(gè)包實(shí)現(xiàn)的思路:
// 將參數(shù)轉(zhuǎn)為數(shù)組,對(duì)每一個(gè)koa1的中間件執(zhí)行convert操作 convert.compose = function (arr) { if (!Array.isArray(arr)) { arr = Array.from(arguments) } return compose(arr.map(convert)) } // 關(guān)鍵在于convert的實(shí)現(xiàn) const convert = mw => (ctx, next) => { // 借助co庫(kù),返回一個(gè)Promise,同時(shí)執(zhí)行yield return co.call(ctx, mw.call(ctx, createGenerator(next))); }; function * createGenerator (next) { /* next為koa-compomse中: function next () { return dispatch(i + 1) } */ return yield next() // 執(zhí)行完koa1的中間件,又回到了利用await執(zhí)行koa2中間件的正軌 }
個(gè)人感覺(jué)koa-convert的思路就是對(duì)Generator封裝一層Promise,使上一個(gè)中間件可以利用await next()的方式調(diào)用,對(duì)于Generator的執(zhí)行,利用co庫(kù),從而達(dá)到了兼容的目的。
看完上述內(nèi)容,你們對(duì)node中koa中間件機(jī)制的原理是什么有進(jìn)一步的了解嗎?如果還想了解更多知識(shí)或者相關(guān)內(nèi)容,請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝大家的支持。
文章標(biāo)題:node中koa中間件機(jī)制的原理是什么
文章地址:http://muchs.cn/article44/jejjhe.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供建站公司、自適應(yīng)網(wǎng)站、云服務(wù)器、動(dòng)態(tài)網(wǎng)站、品牌網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)