大前端領域 Middleware 有幾種實現方式?
一、前言
Middleware(中間件)本意是指位於服務器的操作系統之上,管理計算資源和網絡通信的一種通用獨立的系統軟件服務程序。分佈式應用軟件藉助這種軟件在不同的技術之間共享資源。而在大前端領域,Middleware 的含義則簡單得多,一般指提供通用獨立功能的數據處理函數
。典型的 Middleware 包括日誌記錄、數據疊加和錯誤處理等。本文將橫向對比大前端領域內各大框架的 Middleware 使用場景和實現原理,包括Express
, Koa
, Redux
和Axios
。
二、大前端領域的 Middleware
這裏說的大前端領域自然就包括了服務器端和客戶端了。最早提出 Middleware 概念的是Express
, 隨後由原班人馬打造的Koa
不但沿用了 Middleware 的架構設計,還更加徹底的把自己定義爲中間件框架
。
Expressive HTTP middleware framework for node.js
在客戶端領域,Redux
也引入了 Middleware 的概念,方便獨立功能的函數對 Action 進行處理。Axios
雖然沒有中間件,但其攔截器
的用法卻跟中間件十分相似,也順便拉進來一起比較。下面的表格橫向比較了幾個框架的中間件或類中間件的使用方式。
下面我們一起來拆解這些框架的內部實現方式。
三、Express
3.1 用法
app.use(function logMethod(req, res, next) {
console.log('Request Type:', req.method)
next()
})
Express
的 Middleware 有多種層級的註冊方式,在此以應用層級的中間件爲例子。這裏看到 2 個關鍵字,use
和next
。Express
通過use
註冊,next
觸發下一中間件執行的方式,奠定了中間件架構的標準用法。
3.2 原理
原理部分會對源碼做極端的精簡,只保留核心。
Middleware 註冊(use)
var stack = [];
function use(fn) {
stack.push(fn);
}
Middleware 調度(next)
function handle(req, res) {
var idx = 0;
next();
function next() {
var fn = stack[idx++];
fn(req, res, next)
}
}
當請求到達的時候,會觸發handle
方法。接着next
函數從隊列中順序取出 Middleware 並執行。
四、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 註冊跟路由無關,所有的請求都會經過註冊的中間件。同時Koa
與生俱來支持async/await
異步編程模式,代碼風格更加簡潔。至於洋蔥模型什麼的大家都清楚,就不廢話了。
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執行完的後續操作,結合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 也是順序執行的,通過dispatch
函數來控制。代碼的編寫模式也很像:調用dispatch/next -> 定義dispatch/next -> dispatch/next作爲回調遞歸調用
。這裏有個地方要注意下,對於 Middleware 來說,它們的await next()
實際上就是await dispatch(i)
。當執行到最後一個 Middleware 的時候,會觸發條件if (i === middleware.length) fn = next
,這裏的next
是undefined
,會觸發條if (!fn) return Promise.resolve()
,繼續執行最後一個 Middleware await next()
後面的代碼,也是洋蔥模型由內往外執行的時間點。
五、Redux
Redux
是我所知的第一個將 Middleware 概念應用到客戶端的前端框架,它的源碼處處體現出函數式編程的思想,讓人眼前一亮。
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
中間件的參數做過柯里化,store
是applyMiddleware
內部傳進來的,next
是compose
後傳進來的,action
是dispatch
傳進來的。這裏的設計確實十分巧妙,下面我們結合源碼來進行分析。
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)
}
// 先執行一遍middleware,把第一個參數store傳進去
chain = middlewares.map(middleware => middleware(middlewareAPI))
// 傳入原始的dispatch
dispatch = compose(...chain)(store.dispatch)
return {
...store,
dispatch
}
}
}
這裏compose
的返回值又重新賦值給dispatch
,說明我們在應用內調用的dispatch
並不是store
自帶的,而是經過 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),本質上都是在數據處理鏈路的 2 點之間,提供獨立的、配置化的、可疊加的額外功能。
6.1 用法
// 請求攔截器
axios.interceptors.request.use(function (config) {
config.headers.token = 'added by interceptor';
return config;
});
// 響應攔截器
axios.interceptors.response.use(function (data) {
data.data = data.data + ' - modified by interceptor';
return data;
});
Axios
的 interceptors 分請求和響應 2 種,註冊後會自動按註冊的順序執行,無需像其他框架一樣要手動調用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
內部會維護 2 個 interceptors,它們有獨立的 handlers 數組。use
就是往數組添加元素而已,跟其它框架不同的是這裏的數組元素不是一個函數,而是一個對象,包含fulfilled
和rejected
2 個屬性。第二個參數不傳的時候rejected
就是 undefined。
任務編排
// 精簡後的代碼
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 的鏈式調用,將 interceptors 串聯了起來,執行順序是:requestInterceptorChain
-> chain
-> responseInterceptorChain
。這裏有一個默認的約定,chain 裏的元素都是按照[fulfilled1, rejected1, fulfilled2, rejected2]
這種模式排列的,所以註冊 interceptors 的時候如果沒有提供第二個參數,也會有一個默認值 undefined。
七、各框架的橫向對比
看了各大框架的 Middleware 實現方式之後,我們可以總結出以下幾個特點:
-
Middleware 機制既可以用於服務器端也可以用於客戶端
-
Middleware 機制本質上是向框架使用者開放數據處理鏈路上的一個或多個點,增強框架的數據處理能力
-
絕大多數的 Middleware 都是不依賴於具體業務的可複用的功能
-
多個 Middleware 可以組合起來實現複雜功能
我們再來總結一下各大框架中間件系統實現方式的精髓:
這裏面最精妙也是最難理解的就是Array.reduce
這種形式,需要反覆的推敲。promise.then
鏈式調用的任務編排方法也十分巧妙,前面處理完的數據會自動傳給下一個then
。遞歸調用的形式則最好理解,Koa
在Express
實現的基礎上天然支持異步調用,更符合服務器端場景。
八、總結
本文從使用方式入手,結合源碼講解了各大前端框架中 Middleware 的實現方式,橫向對比了他們之間的異同。當中的遞歸調用、函數嵌套和 promise 鏈式調用的技巧非常值得我們借鑑學習。
本文由 Readfog 進行 AMP 轉碼,版權歸原作者所有。
來源:https://mp.weixin.qq.com/s/pU4YK5rRauvEz9Fs9RMzow