上一篇講了如何編寫屬於自己的 Koa 中間件，本篇將根據原理實現一個簡單的中間件處理函數，並對 Koa 中間件處理函數 compose 函數進行源碼解析。
1. compose 函數簡單實現
Koa 中間件採取的是中間件洋蔥模型，具體原理可見如何編寫屬於自己的 Koa 中間件。本質就是將中間件嵌套執行：
function middleware0(){
console.log('middleware0')
}
function middleware1(){
console.log('middleware1')
}
// 將兩個中間件嵌套執行
middleware0(middleware1())當然實際上更復雜，還要考慮中間件的異步執行和中間件如何進行嵌套。Koa 中異步處理在 Koa1 中使用的是 generator + co.js，在 Koa2 中使用的是 async/await，我們本次採用 async/await 來處理異步。中間件的嵌套可以通過將中間件當參數傳遞來實現嵌套。據此我們對上面的代碼進行進一步加工：
ps：Node7.6+ 支持 async/await
async function middleware0(next){
console.log('middleware0')
await next()
}
async function middleware1(next){
console.log('middleware1')
}
// 將兩個中間件嵌套執行
middleware0(middleware1)Koa 中通過 compose 函數對中間件的進行處理。compose 函數參數爲 middleware 的數組， middleware 數組成員是通過 use 方法添加的中間件。下面寫個簡單的 compose 函數，來實現多箇中間件的處理：
async function middleware0(next){
console.log('middleware0')
await next()
console.log('middleware0 end')
}
async function middleware1(next){
console.log('middleware1')
await next()
console.log('middleware1 end')
}
async function middleware2(next){
console.log('middleware2')
await next()
console.log('middleware2 end')
}
/**
* @param {Array} 中間件數組
*/
function compose (middleware) {
// 從第一個中間件開始執行
return dispatch(0)
function dispatch(i){
// 獲取第 i 箇中間件
fn = middleware[i]
// 獲取不到中間件，則直接返回結束
if(!fn) return
// 執行第 i 箇中間件，並傳入第 i + 1 箇中間件
return fn(() => dispatch(i + 1))
}
}
// 執行
compose([middleware0, middleware1, middleware2])2. 源碼解析
我們已經簡單實現了一個 compose 函數，現在來看下 Koa 中源碼的實現。Koa 中的 compose 函數已經提取到 koa-compose 包中，其中的核心代碼如下：
/**
* @param {Array} 中間件數組
* @return {Function}
*/
function compose (middleware) {
// 判斷是否爲數組，不是則拋出異常
if (!Array.isArray(middleware)) throw new TypeError('Middleware stack must be an array!')
// 判斷 middleware 數組中的中間件是否爲函數，不是函數拋出異常
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) {
// 同一個中間件多次調用 next 拋出異常
if (i <= index) return Promise.reject(new Error('next() called multiple times'))
index = i
// 獲取第 i 箇中間件
let fn = middleware[i]
/**
* 中間件執行結束，檢查是否有傳入 next 回調函數
* 此 next 並非中間件執行的 next 參數
*/
if (i === middleware.length) fn = next
/**
* 所有的返回都是Promise對象
* Promise對象可以保證中間件和返回請求對象之間的執行順序
*/
if (!fn) return Promise.resolve()
try {
// 執行第 i 箇中間件，並傳入第 i + 1 箇中間件
return Promise.resolve(fn(context, dispatch.bind(null, i + 1)));
} catch (err) {
return Promise.reject(err)
}
}
}
}通過解析可以發現，源碼相對於我們的實現更加健全：
-
更完善的異常處理
- 在執行前統一對傳入參數進行檢查
- 多次執行 next 函數拋出異常處理等
- 最終返回結果 Promise 化，保證中間件和整個處理函數在 Koa 中的執行順序，具體可參考下面 Koa 源碼片段：
/**
* application.js
* fnMiddleware(ctx) 就是 compose 函數返回的函數，默認不傳入 next 參數
* Promise 保證中間件，handleResponse 執行順序。
*/
fnMiddleware(ctx).then(handleResponse).catch(onerror)3. 小結
從最開始的編寫 Koa 中間件，到現在閱讀 compose 函數源碼，Koa 中間件機制並不複雜，瞭解之後，我們可以運用、編寫更合適的中間件，構建自己的 Koa 應用。
- 本文首發於公衆號，更多內容歡迎關注我的公衆號： 阿誇漫談