Koa 系列 —— Koa 中間件機制解析

上一篇講了如何編寫屬於本身的 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 應用。

• 本文首發於公衆號，更多內容歡迎關注個人公衆號： 阿誇漫談