聊聊大前端領(lǐng)域 Middleware 的幾種實(shí)現(xiàn)方式？

點(diǎn)擊上方 程序員成長指北，關(guān)注公眾號

回復(fù)1，加入高級 Node 進(jìn)階交流群

一、前言

Middleware（中間件）本意是指位于服務(wù)器的操作系統(tǒng)之上，管理計(jì)算資源和網(wǎng)絡(luò)通信的一種通用獨(dú)立的系統(tǒng)軟件服務(wù)程序。分布式應(yīng)用軟件借助這種軟件在不同的技術(shù)之間共享資源。而在大前端領(lǐng)域，Middleware 的含義則簡單得多，一般指提供通用獨(dú)立功能的數(shù)據(jù)處理函數(shù)。典型的 Middleware 包括日志記錄、數(shù)據(jù)疊加和錯誤處理等。本文將橫向?qū)Ρ却笄岸祟I(lǐng)域內(nèi)各大框架的 Middleware 使用場景和實(shí)現(xiàn)原理，包括Express, Koa, Redux和Axios。

二、大前端領(lǐng)域的Middleware

這里說的大前端領(lǐng)域自然就包括了服務(wù)器端和客戶端了。最早提出 Middleware 概念的是Express, 隨后由原班人馬打造的Koa不但沿用了 Middleware 的架構(gòu)設(shè)計(jì)，還更加徹底的把自己定義為中間件框架。

Expressive HTTP middleware framework for node.js

在客戶端領(lǐng)域，Redux也引入了 Middleware 的概念，方便獨(dú)立功能的函數(shù)對 Action 進(jìn)行處理。Axios雖然沒有中間件，但其攔截器的用法卻跟中間件十分相似，也順便拉進(jìn)來一起比較。下面的表格橫向比較了幾個框架的中間件或類中間件的使用方式。

下面我們一起來拆解這些框架的內(nèi)部實(shí)現(xiàn)方式。

三、Express

3.1 用法

app.use(function logMethod(req, res, next) {
  console.log('Request Type:', req.method)
  next()
})

Express的 Middleware 有多種層級的注冊方式，在此以應(yīng)用層級的中間件為例子。這里看到 2 個關(guān)鍵字，use和next。Express通過use注冊，next觸發(fā)下一中間件執(zhí)行的方式，奠定了中間件架構(gòu)的標(biāo)準(zhǔn)用法。

3.2 原理

原理部分會對源碼做極端的精簡，只保留核心。

Middleware 注冊（use）

var stack = [];
function use(fn) {
  stack.push(fn);
}

Middleware 調(diào)度（next）

function handle(req, res) {
  var idx = 0;
  next();
  function next() {
    var fn = stack[idx++];
    fn(req, res, next)
  }
}

當(dāng)請求到達(dá)的時候，會觸發(fā)handle方法。接著next函數(shù)從隊(duì)列中順序取出 Middleware 并執(zhí)行。

四、Koa

4.1 用法

app.use(async (ctx, next) => {
  const start = Date.now();
  await next();
  const ms = Date.now() - start;
  console.log(`${ctx.method} ${ctx.url} - ${ms}ms`);
});

跟Express相比，Koa的 Middleware 注冊跟路由無關(guān)，所有的請求都會經(jīng)過注冊的中間件。同時Koa與生俱來支持async/await異步編程模式，代碼風(fēng)格更加簡潔。至于洋蔥模型什么的大家都清楚，就不廢話了。

4.2 原理

Middleware 注冊（use）

var middleware = [];
function use(fn) {
  middleware.push(fn);
}

Middleware 編排（koa-compose）

function compose (middleware) {
  return function (context, next) {
    let index = -1
    return dispatch(0)
    function dispatch (i) {
      index = i
      let fn = middleware[i]
      // middleware執(zhí)行完的后續(xù)操作，結(jié)合koa的源碼，這里的next=undefined
      if (i === middleware.length) fn = next
      if (!fn) return Promise.resolve()
      try {
        return Promise.resolve(fn(context, dispatch.bind(null, i + 1)));
      } catch (err) {
        return Promise.reject(err)
      }
    }
  }
}

跟Express類似，Koa的 Middleware 也是順序執(zhí)行的，通過dispatch函數(shù)來控制。代碼的編寫模式也很像：調(diào)用dispatch/next -> 定義dispatch/next -> dispatch/next作為回調(diào)遞歸調(diào)用。這里有個地方要注意下，對于 Middleware 來說，它們的await next()實(shí)際上就是await dispatch(i)。當(dāng)執(zhí)行到最后一個 Middleware 的時候，會觸發(fā)條件if (i === middleware.length) fn = next，這里的next是undefined，會觸發(fā)條if (!fn) return Promise.resolve()，繼續(xù)執(zhí)行最后一個 Middleware await next()后面的代碼，也是洋蔥模型由內(nèi)往外執(zhí)行的時間點(diǎn)。

五、Redux

Redux是我所知的第一個將 Middleware 概念應(yīng)用到客戶端的前端框架，它的源碼處處體現(xiàn)出函數(shù)式編程的思想，讓人眼前一亮。

5.1 用法

const logger = store => next => action => {
  console.info('dispatching', action)
  let result = next(action)
  console.log('next state', store.getState())
  return result
}
const crashReporter = store => next => action => {
  try {
    return next(action)
  } catch (err) {
    console.error('Caught an exception!', err)
  }
}
const store = createStore(appReducer, applyMiddleware(logger, crashReporter))

Redux中間件的參數(shù)做過柯里化，store是applyMiddleware內(nèi)部傳進(jìn)來的，next是compose后傳進(jìn)來的，action是dispatch傳進(jìn)來的。這里的設(shè)計(jì)確實(shí)十分巧妙，下面我們結(jié)合源碼來進(jìn)行分析。

5.2 原理

Middleware 編排（applyMiddleware）

export default function applyMiddleware(...middlewares) {
  return (createStore) => (reducer, preloadedState) => {
    const store = createStore(reducer, preloadedState)
    let dispatch = store.dispatch
    let chain = []
    const middlewareAPI = {
      getState: store.getState,
      dispatch: (action) => dispatch(action)
    }
    // 先執(zhí)行一遍middleware，把第一個參數(shù)store傳進(jìn)去
    chain = middlewares.map(middleware => middleware(middlewareAPI))
    // 傳入原始的dispatch
    dispatch = compose(...chain)(store.dispatch)
    return {
      ...store,
      dispatch
    }
  }
}

這里compose的返回值又重新賦值給dispatch，說明我們在應(yīng)用內(nèi)調(diào)用的dispatch并不是store自帶的，而是經(jīng)過 Middleware 處理的升級版。

Middleware 編排（compose）

function compose (...funcs) {
  if (funcs.length === 0) {
    return arg => arg
  }
  if (funcs.length === 1) {
    return funcs[0]
  }
  return funcs.reduce((a, b) => (...args) => a(b(...args)))
}

compose的核心代碼只有一行，像套娃一樣的將 Middleware 一層一層的套起來，最底層的args就是store.dispatch。

六、Axios

Axios中沒有 Middleware 的概念，但卻有類似功能的攔截器(interceptors)，本質(zhì)上都是在數(shù)據(jù)處理鏈路的 2 點(diǎn)之間，提供獨(dú)立的、配置化的、可疊加的額外功能。

6.1 用法

// 請求攔截器
axios.interceptors.request.use(function (config) {
  config.headers.token = 'added by interceptor';
  return config;
});
// 響應(yīng)攔截器
axios.interceptors.response.use(function (data) {
  data.data = data.data + ' - modified by interceptor';
  return data;
});

Axios的 interceptors 分請求和響應(yīng) 2 種，注冊后會自動按注冊的順序執(zhí)行，無需像其他框架一樣要手動調(diào)用next()。

6.2 原理

interceptors 注冊（use）

function Axios(instanceConfig) {
  this.defaults = instanceConfig;
  this.interceptors = {
    request: new InterceptorManager(),
    response: new InterceptorManager()
  };
}
function InterceptorManager() {
  this.handlers = [];
}
InterceptorManager.prototype.use = function use(fulfilled, rejected) {
  this.handlers.push({
    fulfilled: fulfilled,
    rejected: rejected
  });
  return this.handlers.length - 1;
};

可以看到Axios內(nèi)部會維護(hù) 2 個 interceptors，它們有獨(dú)立的 handlers 數(shù)組。use就是往數(shù)組添加元素而已，跟其它框架不同的是這里的數(shù)組元素不是一個函數(shù)，而是一個對象，包含fulfilled和rejected 2 個屬性。第二個參數(shù)不傳的時候rejected就是 undefined。

任務(wù)編排

// 精簡后的代碼
Axios.prototype.request = function request(config) {
  config = mergeConfig(this.defaults, config);
  // 成對的添加元素
  var requestInterceptorChain = [];
  this.interceptors.request.forEach(function unshiftRequestInterceptors(interceptor) {
    requestInterceptorChain.unshift(interceptor.fulfilled, interceptor.rejected);
  });
  
  var responseInterceptorChain = [];
  this.interceptors.response.forEach(function pushResponseInterceptors(interceptor) {
    responseInterceptorChain.push(interceptor.fulfilled, interceptor.rejected);
  });
  
  var chain = [dispatchRequest, undefined];
  
  Array.prototype.unshift.apply(chain, requestInterceptorChain);
  chain.concat(responseInterceptorChain);
  
  promise = Promise.resolve(config);
  while (chain.length) {
    promise = promise.then(chain.shift(), chain.shift());
  }
  return promise;
}

這里通過 promise 的鏈?zhǔn)秸{(diào)用，將 interceptors 串聯(lián)了起來，執(zhí)行順序是：requestInterceptorChain -> chain -> responseInterceptorChain。這里有一個默認(rèn)的約定，chain 里的元素都是按照[fulfilled1, rejected1, fulfilled2, rejected2]這種模式排列的，所以注冊 interceptors 的時候如果沒有提供第二個參數(shù)，也會有一個默認(rèn)值 undefined。

七、各框架的橫向?qū)Ρ?span style="display: none;">

看了各大框架的 Middleware 實(shí)現(xiàn)方式之后，我們可以總結(jié)出以下幾個特點(diǎn)：

• Middleware 機(jī)制既可以用于服務(wù)器端也可以用于客戶端
• Middleware 機(jī)制本質(zhì)上是向框架使用者開放數(shù)據(jù)處理鏈路上的一個或多個點(diǎn)，增強(qiáng)框架的數(shù)據(jù)處理能力
• 絕大多數(shù)的 Middleware 都是不依賴于具體業(yè)務(wù)的可復(fù)用的功能
• 多個 Middleware 可以組合起來實(shí)現(xiàn)復(fù)雜功能

我們再來總結(jié)一下各大框架中間件系統(tǒng)實(shí)現(xiàn)方式的精髓：

這里面最精妙也是最難理解的就是Array.reduce這種形式，需要反復(fù)的推敲。promise.then鏈?zhǔn)秸{(diào)用的任務(wù)編排方法也十分巧妙，前面處理完的數(shù)據(jù)會自動傳給下一個then。遞歸調(diào)用的形式則最好理解，Koa在Express實(shí)現(xiàn)的基礎(chǔ)上天然支持異步調(diào)用，更符合服務(wù)器端場景。

八、總結(jié)

本文從使用方式入手，結(jié)合源碼講解了各大前端框架中 Middleware 的實(shí)現(xiàn)方式，橫向?qū)Ρ攘怂麄冎g的異同。當(dāng)中的遞歸調(diào)用、函數(shù)嵌套和 promise 鏈?zhǔn)秸{(diào)用的技巧非常值得我們借鑒學(xué)習(xí)。