Koa 系列 —— Koa 中介軟體機制解析

阿誇AQUA發表於2019-02-16
原文網址 : https://flycode.co/archives/81392

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

  • 本文首發於公眾號，更多內容歡迎關注我的公眾號： 阿誇漫談

相關文章