本節(jié)將結(jié)合例子和源碼對koa2的中間件機制做一介紹。
什么是中間件蓖康？
中間件的本質(zhì)就是一種在特定場景下使用的函數(shù)庶骄，koa官網(wǎng)給了它一個特殊的稱謂middleware陕悬，中文譯為中間件碴犬。
這些被稱為中間件的特殊函數(shù)可以介入到koa對網(wǎng)絡(luò)的請求和相應(yīng)的處理絮宁，負責(zé)完成某個特定的功能〕岬校基本上羞福，Koa 所有的功能都是通過中間件實現(xiàn)的。
中間件包含兩個參數(shù) ctx, next：
- ctx: 作為上下文使用,包括基本的ctx.request和ctx.response另外koa通過delegates這個庫對request, response一些常用屬性或者方法,做了很多代理操作,可以直接通過ctx訪問得到,比如request.url可以寫成ctx.url蚯涮。
- next: 中間件通過next函數(shù)聯(lián)系, 執(zhí)行next()后會將控制權(quán)交給下一個中間件, 直到?jīng)]有中間件執(zhí)行next后將會沿路折返,將控制權(quán)交換給前一個中間件治专，因此next()后面的代碼會在后面中間件執(zhí)行結(jié)束后執(zhí)行。
簡單講：ctx為網(wǎng)絡(luò)處理上下文,next指向下個中間件遭顶，內(nèi)部通過dispatch函數(shù)形成了一條處理請求的流水線张峰。
中間件的使用
在koa中使用中間件特別簡單，實例化直接把中間件傳入其use方法即可棒旗，比如我們的靜態(tài)服務(wù)器：
const Koa = require('koa');
const KoaStatic = require('koa-static');
const app = new Koa();
app.use(KoaStatic('./static'));
要想了解原理喘批，我們需要到koa源碼中找到對use方法的定義：
use(fn) {
if (typeof fn !== 'function') throw new TypeError('middleware must be a function!');
if (isGeneratorFunction(fn)) {
fn = convert(fn);
}
debug('use %s', fn._name || fn.name || '-');
this.middleware.push(fn);
return this;
}
可以看到：
- 通過use方法, 將中間件push到koa實例對象app的數(shù)組屬性middleware中；
- 同時koa2铣揉， 還使用 isGeneratorFunction(fn) 來判斷是否為 Generator語法饶深，并通過 convert(fn) 轉(zhuǎn)換成 async/await 語法, 以兼容 Generator 語法的中間件；
- 最后返回this意味著可以鏈?zhǔn)秸{(diào)用use函數(shù)逛拱。
中間件的執(zhí)行順序
中間件是按順序執(zhí)行, 可通過以下例子驗證：
const first = (ctx, next) => {
console.log('>>> 1');
next();
console.log('<<< 1');
}
const second = (ctx, next) => {
console.log('>>> 2');
next();
console.log('<<< 2');
}
const third = (ctx, next) => {
console.log('>>> 3');
next();
console.log('<<< 3');
}
app.use(first);
app.use(second);
app.use(third);
執(zhí)行后敌厘，我們在終端看到的打印結(jié)果如下：
>>> 1
>>> 2
>>> 3
<<< 3
<<< 2
<<< 1
可以看到，中間件通過next函數(shù)聯(lián)系, 執(zhí)行next()后會將控制權(quán)交給下一個中間件, 直到?jīng)]有中間件執(zhí)行next后將會沿路折返,將控制權(quán)交換給前一個中間件朽合，因此next()后面的代碼會在后面中間件執(zhí)行結(jié)束后執(zhí)行俱两。
另外，路由也是通過中間件實現(xiàn)曹步，執(zhí)行順序也一樣, 所以路由設(shè)置應(yīng)該把容易匹配到的放在后面：比如路由規(guī)則包含了/all和/:id宪彩，那么，對/all處理的中間件應(yīng)該放在/:id之前讲婚。
中間件的異步處理
我們先看一個例子：
const Koa = require('koa')
const app = new Koa()
app.use((ctx, next) => {
console.log('>>> 1');
next()
console.log('<<< 1');
})
app.use((ctx) => {
setTimeout(() => {console.log(2)}, 1000)
})
app.listen(8888)
終端打印結(jié)果如下：
>>> 1
<<< 1
2
如何保證第二個中間件函數(shù)執(zhí)行完畢后尿孔， 才執(zhí)行第一個中間件函數(shù)next之后的代碼的呢？請看實現(xiàn):
app.use(async(ctx, next) => {
console.log('>>> 1');
await next()
console.log('<<< 1');
})
app.use((ctx) => {
return new Promise((resolve,reject) => {
setTimeout(() => {
console.log(2)
resolve()
}, 1000)
})
})
終端打下結(jié)果為：
>>> 1
2
<<< 1
可以看到：我們通過在第一個中間件中使用async/await筹麸，第二個中間件返回一個promise對象活合，執(zhí)行完畢異步代碼后再resolve，就保證了代碼的執(zhí)行順序竹捉。
中間件的級聯(lián)執(zhí)行
當(dāng)執(zhí)行koa實例app的listen方法開啟服務(wù)器時,實際上是在內(nèi)部,使用http模塊,啟動了http服務(wù)器,并將自身的callback函數(shù)傳入:
listen(...args) {
debug('listen');
const server = http.createServer(this.callback());
return server.listen(...args);
}
接著我們看下callback的源碼：
callback() {
const fn = compose(this.middleware);
if (!this.listenerCount('error')) this.on('error', this.onerror);
const handleRequest = (req, res) => {
const ctx = this.createContext(req, res);
return this.handleRequest(ctx, fn);
};
return handleRequest;
}
可以看到芜辕，通過 compose() 這個方法，就能將我們傳入的中間件數(shù)組轉(zhuǎn)換并級聯(lián)執(zhí)行块差，并返回 Promise侵续。 compose() 這個方法來自依賴庫koa-compose倔丈，其實現(xiàn)如下：
function compose (middleware) {
if (!Array.isArray(middleware)) throw new TypeError('Middleware stack must be an array!')
for (const fn of middleware) {
if (typeof fn !== 'function') throw new TypeError('Middleware must be composed of functions!')
return function (context, next) {
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]
if (i === middleware.length) fn = next
if (!fn) return Promise.resolve()
try {
return Promise.resolve(fn(context, dispatch.bind(null, i + 1)));
} catch (err) {
return Promise.reject(err)
}
}
}
}
可以看到，compose的執(zhí)行流程是將中間件數(shù)組傳入, 返回一個類型為(ctx, next) =>{}的函數(shù)fn(context, dispatch.bind(null, i + 1))状蜗，最后折回通過if (!fn) return Promise.resolve()一級級遞歸需五，從callback()方法中可以看到，每當(dāng)有請求時：
- 首先會執(zhí)行第一個中間件,并把下個中間件作為next參數(shù)傳入, 執(zhí)行到next()時轧坎，將控制權(quán)交給下一個中間件宏邮；直到后續(xù)中間件執(zhí)行結(jié)束, 交還控制權(quán),才能繼續(xù)執(zhí)行next()后面的操作；
- 在dispatch(i+1) 中缸血，傳遞
i+1這個參數(shù)就相當(dāng)于執(zhí)行了下一個中間件蜜氨，從而形成遞歸調(diào)用; - 每個中間件都有屬于自己的一個閉包作用域，同一個中間件的 i 是不變的捎泻，而 index 是在閉包作用域外面的;
- 執(zhí)行到最后一個中間件, fn = next飒炎，因為next()為undefined,所以終止執(zhí)行, 然后沿路折返,將控制權(quán)交換給前一個中間件，笆豁；
這樣郎汪，內(nèi)部通過dispatch函數(shù)就形成了一條處理請求的流水線。
當(dāng)所有的中間件執(zhí)行結(jié)束后闯狱，說明請求已經(jīng)處理好了煞赢，然后把處理好的上下文ctx傳入respond，根據(jù)其定義response的狀態(tài)碼和body類型返回給客戶端對應(yīng)的數(shù)據(jù)哄孤。
如何寫中間件
在寫之前照筑，我們先回顧中間件的執(zhí)行機制，從async 的執(zhí)行機制 “只有當(dāng)所有的 await 異步都執(zhí)行完之后才能返回一個 Promise”看我們用 async 的語法寫的中間件的執(zhí)行流程為：
- 先執(zhí)行第一個中間件（compose 默認執(zhí)行 dispatch(0)）录豺，該中間件返回 Promise朦肘，然后被 Koa 監(jiān)聽饭弓，執(zhí)行對應(yīng)的邏輯（成功或失斔ⅰ）；
- 在執(zhí)行第一個中間件的邏輯時弟断，遇到 await next()時咏花，會繼續(xù)執(zhí)行 dispatch(i+1)，也就是執(zhí)行 dispatch(1)阀趴，會手動觸發(fā)執(zhí)行第二個中間件;這時候昏翰，第一個中間件 await next() 后面的代碼就會被 pending，等待 await next() 返回 Promise刘急，才會繼續(xù)執(zhí)行第一個中間件 await next() 后面的代碼;
- 同理棚菊，在執(zhí)行第二個中間件的時候，遇到 await next() 的時候叔汁，會手動執(zhí)行第三個中間件统求，await next() 后面的代碼依然被 pending检碗，等待 await 下一個中間件的 Promise.resolve；
- 以此類推码邻，直到最后1個中間件執(zhí)行完折剃，返回 Promise，然后倒數(shù)第2個中間件才執(zhí)行后續(xù)的代碼并返回Promise像屋，之后是倒數(shù)第三個中間件怕犁，一直到第一個中間件執(zhí)行完，并返回 Promise己莺。
通過上面的分析奏甫，我只需按照如下方式寫中間件即可：
async function middleware(ctx, next){
try{
// 處理代碼
await next()
// 處理代碼
}.catch(err){
// 異常捕獲
}
}
比如，我在真實項目寫的一個記錄一次請求處理的中間件：
app.use(async (ctx, next) => {
const start = new Date();
await next();
const ms = new Date() - start;
console.log(`${ctx.method} ${ctx.url} - ${ms}ms`);
});
中間件的分類
- 中間件簡介
Koa.js 中間件 可為 狹義中間件和廣義中間件 兩種類型凌受，其區(qū)別如下：
狹義中間件特點：
一般直接被 app.use() 加載
中間件內(nèi)請求攔截 request
中間件內(nèi)響應(yīng)攔截 response
中間件內(nèi)上下文代理扶檐，初始化實例時候掛載代理在app.context上，請求時候掛載代理在ctx上
例如, koa-bodyparser主要是攔截請求后解析出HTTP請求體中的POST數(shù)據(jù)胁艰，而koa-static主要是靠攔截請求和響應(yīng)款筑，加載靜態(tài)資源，再掛載到ctx上腾么。
廣義中間件特點：
間接被 app.use() 加載
間接提供中間件或者子中間件
其他方式接入koa切面
例如中間koa-router 是先注冊路由后形成多個子中間件奈梳，后面再封裝成一個父中間件提供給app.use()加載，讓所有子中間件加載到Koa.js的請求洋蔥模型中解虱。
總結(jié)
本節(jié)我們深入介紹了koa的中間件機制攘须，其處理流程大致如下：
- 初始化koa實例后，通過use方法來加載中間件殴泰，存儲于koa實例的一個數(shù)組屬性于宙；
- 同時，use調(diào)用順序會決定中間件的執(zhí)行順序悍汛；
- 中間件必須是一個可接收兩個參數(shù)的函數(shù)(不是函數(shù)將報錯)捞魁，第一個是ctx上下文對象，另一個是next函數(shù)离咐；
- 通過listen()方法建立好http服務(wù)器后谱俭，會調(diào)用koa-compose模塊對middleware中間件數(shù)組進行依次處理；
- 當(dāng)請求經(jīng)過各中間件處理后宵蛀，將把處理好的上下文ctx傳入respond昆著，簡單處理后返回給客戶端對應(yīng)的數(shù)據(jù)。
