摘要：中異步處理在中使用的是，在中使用的是，我們本次采用來處理異步。函數(shù)參數(shù)為的數(shù)組，數(shù)組成員是通過方法添加的中間件。小結(jié)從最開始的編寫中間件，到現(xiàn)在閱讀函數(shù)源碼，中間件機(jī)制并不復(fù)雜，了解之后，我們可以運(yùn)用編寫更合適的中間件，構(gòu)建自己的應(yīng)用。

上一篇講了如何編寫屬于自己的 Koa 中間件，本篇將根據(jù)原理實(shí)現(xiàn)一個(gè)簡(jiǎn)單的中間件處理函數(shù)，并對(duì) Koa 中間件處理函數(shù) compose 函數(shù)進(jìn)行源碼解析。

Koa 中間件采取的是中間件洋蔥模型，具體原理可見如何編寫屬于自己的 Koa 中間件。本質(zhì)就是將中間件嵌套執(zhí)行：

function middleware0(){
  console.log("middleware0")
}
function middleware1(){
  console.log("middleware1")
}
// 將兩個(gè)中間件嵌套執(zhí)行
middleware0(middleware1())

當(dāng)然實(shí)際上更復(fù)雜，還要考慮中間件的異步執(zhí)行和中間件如何進(jìn)行嵌套。Koa 中異步處理在 Koa1 中使用的是 generator + co.js，在 Koa2 中使用的是 async/await，我們本次采用 async/await 來處理異步。中間件的嵌套可以通過將中間件當(dāng)參數(shù)傳遞來實(shí)現(xiàn)嵌套。據(jù)此我們對(duì)上面的代碼進(jìn)行進(jìn)一步加工：

ps：Node7.6+ 支持 async/await

async function middleware0(next){
  console.log("middleware0")
  await next()
}
async function middleware1(next){
  console.log("middleware1")
}
// 將兩個(gè)中間件嵌套執(zhí)行
middleware0(middleware1)

Koa 中通過 compose 函數(shù)對(duì)中間件的進(jìn)行處理。compose 函數(shù)參數(shù)為 middleware 的數(shù)組， middleware 數(shù)組成員是通過 use 方法添加的中間件。下面寫個(gè)簡(jiǎn)單的 compose 函數(shù)，來實(shí)現(xiàn)多個(gè)中間件的處理：

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} 中間件數(shù)組
 */
function compose (middleware) {
  // 從第一個(gè)中間件開始執(zhí)行
  return dispatch(0) 
  function dispatch(i){
    // 獲取第 i 個(gè)中間件
    fn = middleware[i]
    // 獲取不到中間件，則直接返回結(jié)束
    if(!fn) return
    // 執(zhí)行第 i 個(gè)中間件，并傳入第 i + 1 個(gè)中間件
    return fn(() => dispatch(i + 1))
  }
}
// 執(zhí)行
compose([middleware0, middleware1, middleware2])

我們已經(jīng)簡(jiǎn)單實(shí)現(xiàn)了一個(gè) compose 函數(shù)，現(xiàn)在來看下 Koa 中源碼的實(shí)現(xiàn)。Koa 中的 compose 函數(shù)已經(jīng)提取到 koa-compose 包中，其中的核心代碼如下：

/**
 * @param {Array} 中間件數(shù)組
 * @return {Function}
 */
function compose (middleware) {
  // 判斷是否為數(shù)組，不是則拋出異常
  if (!Array.isArray(middleware)) throw new TypeError("Middleware stack must be an array!")
  // 判斷 middleware 數(shù)組中的中間件是否為函數(shù)，不是函數(shù)拋出異常
  for (const fn of middleware) {
    if (typeof fn !== "function") throw new TypeError("Middleware must be composed of functions!")
  }
  /**
   * 此處先不執(zhí)行中間件，直接返回函數(shù)
   * 統(tǒng)一在外面進(jìn)行異常判斷，再開始執(zhí)行中間件
   */
  return function (context, next) {
    let index = -1
    // 從第一個(gè)中間件開始執(zhí)行
    return dispatch(0)
    function dispatch (i) {
      // 同一個(gè)中間件多次調(diào)用 next 拋出異常
      if (i <= index) return Promise.reject(new Error("next() called multiple times"))
      index = i
      // 獲取第 i 個(gè)中間件
      let fn = middleware[i]
      /**
       * 中間件執(zhí)行結(jié)束，檢查是否有傳入 next 回調(diào)函數(shù)
       * 此 next 并非中間件執(zhí)行的 next 參數(shù)
       */
      if (i === middleware.length) fn = next
      /**
       * 所有的返回都是Promise對(duì)象
       * Promise對(duì)象可以保證中間件和返回請(qǐng)求對(duì)象之間的執(zhí)行順序
       */
      if (!fn) return Promise.resolve()
      try {
        // 執(zhí)行第 i 個(gè)中間件，并傳入第 i + 1 個(gè)中間件
        return Promise.resolve(fn(context, dispatch.bind(null, i + 1)));
      } catch (err) {
        return Promise.reject(err)
      }
    }
  }
}

通過解析可以發(fā)現(xiàn)，源碼相對(duì)于我們的實(shí)現(xiàn)更加健全：

更完善的異常處理

在執(zhí)行前統(tǒng)一對(duì)傳入?yún)?shù)進(jìn)行檢查

多次執(zhí)行 next 函數(shù)拋出異常處理等

最終返回結(jié)果 Promise 化，保證中間件和整個(gè)處理函數(shù)在 Koa 中的執(zhí)行順序，具體可參考下面 Koa 源碼片段：

/**
 * application.js
 * fnMiddleware(ctx) 就是 compose 函數(shù)返回的函數(shù)，默認(rèn)不傳入 next 參數(shù)
 * Promise 保證中間件，handleResponse 執(zhí)行順序。
 */
fnMiddleware(ctx).then(handleResponse).catch(onerror)

從最開始的編寫 Koa 中間件，到現(xiàn)在閱讀 compose 函數(shù)源碼，Koa 中間件機(jī)制并不復(fù)雜，了解之后，我們可以運(yùn)用、編寫更合適的中間件，構(gòu)建自己的 Koa 應(yīng)用。

本文首發(fā)于公眾號(hào)，更多內(nèi)容歡迎關(guān)注我的公眾號(hào)： 阿夸漫談