20行代碼簡單實現(xiàn)koa洋蔥圈模型示例詳解

更新時間：2023年01月17日 10:01:26 作者：秋染蒹葭

這篇文章主要為大家介紹了20行代碼簡單實現(xiàn)koa洋蔥圈模型示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

引言

koa想必很多人直接或間接的都用過，其源碼不知道閱讀本文的你有沒有看過，相當精煉，本文想具體說說koa的中間件模型，一起看看koa-compose的源碼，這也是koa系列的第一篇文章，后續(xù)會更新一下koa相關的其他知識點

koa中間件的使用

先讓我們啟動一個koa服務

// app.js
const koa = require('koa');
const app = new koa();
app.use(async (ctx, next) => {
  console.log('進入第一個中間件')
  next();
  console.log('退出第一個中間件')
})
app.use(async (ctx, next) => {
  console.log('進入第2個中間件')
  next();
  console.log('退出第2個中間件')
})
app.use((ctx, next) => {
  console.log('進入第3個中間件')
  next();
  console.log('退出第3個中間件')
})
app.use(ctx => {
  ctx.body = 'hello koa'
})
app.listen(8080, () => {
  console.log('服務啟動，監(jiān)聽8080端口')
})

上述的服務在訪問的時候會得到如下結果：

服務啟動，監(jiān)聽8080端口
進入第1個中間件
進入第2個中間件
進入第3個中間件
退出第3個中間件
退出第2個中間件
退出第1個中間件

上面的返回結果有點像一個遞歸的過程，從現(xiàn)象上看當中間件調用next()的時候，函數(shù)會暫停并進入到下一個中間件，當執(zhí)行了最后一個中間件后，執(zhí)行代碼會回溯上游中間件，并執(zhí)行next()之后的代碼，這就是koa的核心能力，洋蔥圈模型

洋蔥圈模型

先看一張經(jīng)典的洋蔥圈模型的示意圖：

在開發(fā)過程中，可以將next()之前的代碼理解為捕獲階段, 而next()之后的代碼可以理解為釋放階段，開發(fā)者結合這兩個狀態(tài)可以實現(xiàn)一些有趣的操作，比如記錄一次請求的時間：

async function responseTime(ctx, next) {
  const start = Date.now();
  await next();
  const ms = Date.now() - start;
  ctx.set('X-Response-Time', `${ms}ms`);
}
app.use(responseTime);

使用洋蔥圈模型可以直接將響應時間記錄的操作解耦出來，這樣就不需要再去對稱的寫在業(yè)務邏輯中了，這是怎么實現(xiàn)的呢？

洋蔥圈模型的實現(xiàn)，koa-compose

我們通過app.use()添加了很多函數(shù)，這些函數(shù)最終傳遞給了compose函數(shù)，先貼上koa-compose的源碼，這里筆者刪除掉了校驗入?yún)⒌囊恍┓侵鞲蛇壿嫞覀兛梢钥吹酱a也就十幾行，非常簡單，接下來讓我們一行一行的去看一下代碼

function compose (middleware) {
  // 返回一個匿名函數(shù)，next為可選參數(shù)
  return function (context, next) {
    // 記錄當前執(zhí)行位置的游標
    let index = -1
    // 從第一個中間件開始，串起所有中間件
    return dispatch(0)
    function dispatch (i) {
      // 為了不破壞洋蔥圈模型，不允許在單個中間件中執(zhí)行多次next函數(shù)
      if (i &lt;= index) return Promise.reject(new Error('next() called multiple times'))
      // 更新游標
      index = i
      let fn = middleware[i]
      // 判斷邊界，假如已經(jīng)到到邊界了，可執(zhí)行外部傳入的回調
      if (i === middleware.length) fn = next
      if (!fn) return Promise.resolve()
      try {
        // 核心處理邏輯，進入fn的執(zhí)行上下文的時候，dispatch就是通過綁定下一個index，變成了next，進入到下一個中間件
        return Promise.resolve(fn(context, dispatch.bind(null, i + 1)))
      } catch (err) {
        return Promise.reject(err)
      }
    }
  }
}

compose接收一個的函數(shù)數(shù)組[fn1, fn2, fn3, ...]，compose調用后，返回了一個匿名函數(shù)，匿名函數(shù)接收兩個參數(shù)

第一個參數(shù)是上下文，對于koa的上下文不在本文的探究范圍，我們只要記得這個是在各個中間件中的共享的就可以了
第二個參數(shù)標記為next，可選參數(shù)，在中間件執(zhí)行的最后檢查執(zhí)行，這個和自定義的中間件中的next不完全一樣，一般是初始化返回了匿名函數(shù)后，調用方自己指定，用于處理一下默認邏輯

通過源碼可以看出，compose是提供了一個洋蔥模型完全執(zhí)行的回調，通過把函數(shù)存儲起來，用next作為鑰匙，串起了我們所有的中間件，其核心代碼就是：

Promise.resolve(fn(context, dispatch.bind(null, i + 1)))

進入fn的執(zhí)行上下文的時候，dispatch就是通過綁定下一個index，變成了next，進入到下一個中間件。另外fn（中間件函數(shù)）可以是個異步函數(shù)，Promise.resolve會等到內部異步函數(shù)resolve之后觸發(fā)

單次調用限制

假如在單個中間件中執(zhí)行多次next函數(shù)的話，會造成下游的中間件多次執(zhí)行，這樣就破壞了洋蔥圈模型，因此限制了在單個中間件中只能執(zhí)行一次next函數(shù)，實現(xiàn)方式時在函數(shù)記錄了一個游標index，初始值是-1；這個游標會記錄當前執(zhí)行到哪個中間件，用來禁止在中間件中多次調用next函數(shù)

在一個中間件內多次調用next的時候，你就會收到下面這個報錯

UnhandledPromiseRejectionWarning: Error: next() called multiple times

koa-compose與流程引擎

koa-compose不僅僅只是koa的一個依賴包，在有些場景下完全可以作為一個獨立的工具來使用的，這里模擬一個代碼檢測工具的應用，完全可以作為一個流程引擎來使用

const koaCompose = require('koa-compose');
function download = (ctx, next) {
  console.log('download code');
  next();
}
function check = (ctx, next) {
  console.log('check style');
  next();
}
function post = (ctx, next) {
  next();
  console.log('post result', ctx.result);
}
function clean = (ctx, next) {
  next();
  console.log('clean temp, remove code');
}
const flowEngine = koaCompose([download, check, post, clean]);
flowEngine(ctx as Context);

上述可以看作一個基于koa-compose實現(xiàn)的流程引擎，在node中，我們會經(jīng)常處理一些多階段的任務，完全可以通過這樣的方式來實現(xiàn)