node中koa中間件機制詳解
koa
koa是由express原班人馬打造的一個更小、更富有表現(xiàn)力、更健壯的web框架。
在我眼中，koa的確是比express輕量的多，koa給我的感覺更像是一個中間件框架，koa只是一個基礎(chǔ)的架子，需要用到的相應(yīng)的功能時，用相應(yīng)的中間件來實現(xiàn)就好，諸如路由系統(tǒng)等。一個更好的點在于，express是基于回調(diào)來處理，至于回調(diào)到底有多么的不好，大家可以自行搜索來看。koa1基于的co庫，所以koa1利用Generator來代替回調(diào)，而koa2由于node對async/await的支持，所以koa2利用的是async/await。關(guān)于async以及co庫等，大家可以參考我之前寫過的一篇文章（理解async）。koa可以說是一個各種中間件的架子，下面就來看一下koa對于中間件部分的實現(xiàn)：
koa1的中間件
koa1主要利用的是Generator來實現(xiàn)，一般來說，koa1的一個中間件大概是長這個樣子的：
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);
});
這樣的輸出會是1, 2, 3, 4, 5，koa的中間件的實現(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(){}
源碼非常的簡單，實現(xiàn)的功能就是將所有的中間件串聯(lián)起來，首先給倒數(shù)第一個中間件傳入一個noop作為其next，再將這個整理后的倒數(shù)第一個中間作為next傳入倒數(shù)第二個中間件，最終得到的next就是整理后的第一個中間件。說起來比較復(fù)雜，畫圖來看：
實現(xiàn)的效果如同上圖，與redux需要實現(xiàn)的目標類似，只要遇到了yield next就去執(zhí)行下一個中間件，利用co庫很容易將這個流程串聯(lián)起來，下面來簡單模擬下，中間件完整的實現(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ù)庫數(shù)據(jù)
const data = yield getData;
console.log(data);
}
middlewares.push(mid1, mid2, response);
// 簡單模擬co庫
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對于async/await的支持，貌似不需要再借助于co這種工具庫了，直接利用原生的就好，于是koa也做出了改變，來看目前的koa-compose：
function compose (middleware) {
// 參數(shù)檢驗
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]
// 最后一個中間件的調(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ù)也有一個變?yōu)榱藘蓚€，而且執(zhí)行下一個的中間件利用的是await next()，要達到與上面的示例代碼的相同效果，需要更改中間件的寫法：
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ù)庫數(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對于中間件的實現(xiàn)還是有著很多的不同的，將koa1的中間件直接拿到koa2下面來使用肯定是會出現(xiàn)錯誤的，如何兼容這兩個版本也成了一個問題，koa團隊寫了一個包來是koa1的中間件可以用于koa2中，叫做koa-convert，先來看看這個包怎么使用：
function *mid3(next) {
console.log(2, 'koa1的中間件');
yield next;
console.log(3, 'koa1的中間件');
}
convert.compose(mid3)
來看下這個包實現(xiàn)的思路：
// 將參數(shù)轉(zhuǎn)為數(shù)組，對每一個koa1的中間件執(zhí)行convert操作
convert.compose = function (arr) {
if (!Array.isArray(arr)) {
arr = Array.from(arguments)
}
return compose(arr.map(convert))
}
// 關(guān)鍵在于convert的實現(xiàn)
const convert = mw => (ctx, next) => {
// 借助co庫，返回一個Promise，同時執(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中間件的正軌
}
個人感覺koa-convert的思路就是對Generator封裝一層Promise，使上一個中間件可以利用await next()的方式調(diào)用，對于Generator的執(zhí)行，利用co庫，從而達到了兼容的目的。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文詳細的介紹了什么是Puppeteer以及使用，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
這篇文章主要介紹了如何從0開始用node寫一個自己的命令行程序，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要給大家介紹了關(guān)于nvm使用use命令失效問題的解決方法,nvm是一個類似于版本管理工具的軟件,它可以輕松地在同一臺計算機上管理多個不同的node.js版本,需要的朋友可以參考下2023-07-07
因為只是用于本地服務(wù)器用于自己測試用，所以不需要太完善的路由功能，所以也就不去使用express框架，而是自己實現(xiàn)一個簡易路由，可以針對自己的需求來定制路由功能。2017-03-03
Nodejs做文本數(shù)據(jù)處理實現(xiàn)詳解
這篇文章主要為大家介紹了Nodejs做文本數(shù)據(jù)處理實現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
node.js WEB開發(fā)中圖片驗證碼的實現(xiàn)方法
這篇文章主要介紹了node.js WEB開發(fā)中圖片驗證碼的實現(xiàn)方法,使用ccap模塊實現(xiàn),需要的朋友可以參考下2014-06-06
如何刪除所有node_modules和package-lock配置文件
這篇文章主要介紹了如何刪除所有node_modules和package-lock配置文件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
解決node-webkit 不支持html5播放mp4視頻的方法
本文給大家分享的是解決node-webkit 不支持html5播放mp4視頻的方法，其原因大概是因為node-webkit沒有購買mp4格式的專利授權(quán)，恩，我們來想個辦法來解決這個事情吧。2015-03-03
nodejs實現(xiàn)日志讀取、日志查找及日志刷新的方法分析
這篇文章主要介紹了nodejs實現(xiàn)日志讀取、日志查找及日志刷新的方法,涉及nodejs日期時間運算、轉(zhuǎn)換及日志讀寫等相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了NodeJS使用七牛云存儲上傳文件的方法,使用七牛云存儲上傳文件確認安裝node和npm，具體服務(wù)器端的云存儲操作方法大家參考下本文吧2017-07-07