原文出自：https://www.pandashen.com
前言
Koa 是當下主流 NodeJS 框架，以輕量見長，而它中間件機制與相對傳統的 Express 支持了異步，所以編碼時經常使用 async/await，提高了可讀性，使代碼變得更優雅，上一篇文章 NodeJS 進階 —— Koa 源碼分析，也對 “洋蔥模型” 和實現它的 compose 進行分析，由於個人覺得 compose 的編程思想比較重要，應用廣泛，所以本篇藉着 “洋蔥模型” 的話題，打算用四種方式來實現 compose。
洋蔥模型案例
如果你已經使用 Koa 對 “洋蔥模型” 這個詞一定不陌生，它就是 Koa 中間件的一種串行機制，並且是支持異步的，下面是一個表達 “洋蔥模型” 的經典案例。
const Koa = require("koa");
const app = new Koa();
app.use(asycn (ctx, next) => {
console.log(1);
await next();
console.log(2);
});
app.use(asycn (ctx, next) => {
console.log(3);
await next();
console.log(4);
});
app.use(asycn (ctx, next) => {
console.log(5);
await next();
console.log(6);
});
app.listen(3000);
// 1
// 3
// 5
// 6
// 4
// 2上面的寫法我們按照官方推薦，使用了 async/await，但如果是同步代碼不使用也沒有關係，這裏簡單的分析一下執行機制，第一個中間件函數中如果執行了 next，則下一個中間件會被執行，依次類推，就有了我們上面的結果，而在 Koa 源碼中，這一功能是靠一個 compose 方法實現的，我們本文四種實現 compose 的方式中實現同步和異步，並附帶對應的案例來驗證。
準備工作
在真正創建 compose 方法之前應該先做些準備工作，比如創建一個 app 對象來頂替 Koa 創建出的實例對象，並添加 use 方法和管理中間件的數組 middlewares。
// 文件：app.js
// 模擬 Koa 創建的實例
const app = {
middlewares: []
};
// 創建 use 方法
app.use = function(fn) {
app.middlewares.push(fn);
};
// app.compose.....
module.exports = app;上面的模塊中導出了 app 對象，並創建了存儲中間件函數的 middlewares 和添加中間件的 use 方法，因爲無論用哪種方式實現 compose 這些都是需要的，只是 compose 邏輯的不同，所以後面的代碼塊中會只寫 compose 方法。
Koa 中 compose 的實現方式
首先介紹的是 Koa 源碼中的實現方式，在 Koa 源碼中其實是通過 koa-compose 中間件來實現的，我們在這裏將這個模塊的核心邏輯抽取出來，用我們自己的方式實現，由於重點在於分析 compose 的原理，所以 ctx 參數就被去掉了，因爲我們不會使用它，重點是 next 參數。
1、同步的實現
// 文件：app.js
app.compose = function() {
// 遞歸函數
function dispatch(index) {
// 如果所有中間件都執行完跳出
if (index === app.middlewares.length) return;
// 取出第 index 箇中間件並執行
const route = app.middlewares[index];
return route(() => dispatch(index + 1));
}
// 取出第一個中間件函數執行
dispatch(0);
};上面是同步的實現，通過遞歸函數 dispatch 的執行取出了數組中的第一個中間件函數並執行，在執行時傳入了一個函數，並遞歸執行了 dispatch，傳入的參數 +1，這樣就執行了下一個中間件函數，依次類推，直到所有中間件都執行完畢，不滿足中間件執行條件時，會跳出，這樣就按照上面案例中 1 3 5 6 4 2 的情況執行，測試例子如下（同步上、異步下）。
// 文件：sync-test.js
const app = require("./app");
app.use(next => {
console.log(1);
next();
console.log(2);
});
app.use(next => {
console.log(3);
next();
console.log(4);
});
app.use(next => {
console.log(5);
next();
console.log(6);
});
app.compose();
// 1
// 3
// 5
// 6
// 4
// 2// 文件：async-test.js
const app = require("./app");
// 異步函數
function fn() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve();
console.log("hello");
}, 3000);
});
}
app.use(async next => {
console.log(1);
await next();
console.log(2);
});
app.use(async next => {
console.log(3);
await fn(); // 調用異步函數
await next();
console.log(4);
});
app.use(async next => {
console.log(5);
await next();
console.log(6);
});
app.compose();我們發現如果案例中按照 Koa 的推薦寫法，即使用 async 函數，都會通過，但是在給 use 傳參時可能會傳入普通函數或 async 函數，我們要將所有中間件的返回值都包裝成 Promise 來兼容兩種情況，其實在 Koa 中 compose 最後返回的也是 Promise，是爲了後續的邏輯的編寫，但是現在並不支持，下面來解決這兩個問題。
注意：後面 compose 的其他實現方式中，都是使用 sync-test.js 和 async-test.js 驗證，所以後面就不再重複了。
2、升級爲支持異步
// 文件：app.js
app.compose = function() {
// 遞歸函數
function dispatch(index) {
// 如果所有中間件都執行完跳出，並返回一個 Promise
if (index === app.middlewares.length) return Promise.resolve();
// 取出第 index 箇中間件並執行
const route = app.middlewares[index];
// 執行後返回成功態的 Promise
return Promise.resolve(route(() => dispatch(index + 1)));
}
// 取出第一個中間件函數執行
dispatch(0);
};我們知道 async 函數中 await 後面執行的異步代碼要實現等待，帶異步執行後繼續向下執行，需要等待 Promise，所以我們將每一箇中間件函數在調用時最後都返回了一個成功態的 Promise，使用 async-test.js 進行測試，發現結果爲 1 3 hello(3s後) 5 6 4 2。
Redux 舊版本 compose 的實現方式
1、同步的實現
// 文件：app.js
app.compose = function() {
return app.middlewares.reduceRight((a, b) => () => b(a), () => {})();
};上面的代碼看起來不太好理解，我們不妨根據案例把這段代碼拆解開，假設 middlewares 中存儲的三個中間件函數分別爲 fn1、fn2 和 fn3，由於使用的是 reduceRight 方法，所以是逆序歸併，第一次 a 代表初始值（空函數），b 代表 fn3，而執行 fn3 返回了一個函數，這個函數再作爲下一次歸併的 a，而 fn2 作爲 b，依次類推，過程如下。
// 第 1 次 reduceRight 的返回值，下一次將作爲 a
() => fn3(() => {});
// 第 2 次 reduceRight 的返回值，下一次將作爲 a
() => fn2(() => fn3(() => {}));
// 第 3 次 reduceRight 的返回值，下一次將作爲 a
() => fn1(() => fn2(() => fn3(() => {})));由上面的拆解過程可以看出，如果我們調用了這個函數會先執行 fn1，如果調用 next 則會執行 fn2，如果同樣調用 next 則會執行 fn3，fn3 已經是最後一箇中間件函數了，再次調 next 會執行我們最初傳入的空函數，這也是爲什麼要將 reduceRight 的初始值設置成一個空函數，就是防止最後一箇中間件調用 next 而報錯。
經過測試上面的代碼不會出現順序錯亂的情況，但是在 compose 執行後，我們希望進行一些後續的操作，所以希望返回的是 Promise，而我們又希望傳入給 use 的中間件函數既可以是普通函數，又可以是 async 函數，這就要我們的 compose 完全支持異步。
2、升級爲支持異步
// 文件：app.js
app.compose = function() {
return Promise.resolve(
app.middlewares.reduceRight(
(a, b) => () => Promise.resolve(b(a)),
() => Promise.resolve();
)()
);
};參考同步的分析過程，由於最後一箇中間件執行後執行的空函數內一定沒有任何邏輯，但爲遇到異步代碼可以繼續執行（比如執行 next 後又調用了 then），都處理成了 Promise，保證了 reduceRight 每一次歸併的時候返回的函數內都返回了一個 Promise，這樣就完全兼容了 async 和普通函數，當所有中間件執行完畢，也返回了一個 Promise，這樣 compose 就可以調用 then 方法執行後續邏輯。
Redux 新版本 compose 的實現方式
1、同步的實現
// 文件：app.js
app.compose = function() {
return app.middlewares.reduce((a, b) => arg => a(() => b(arg)))(() => {});
};Redux 新版本中將 compose 的邏輯做了些改動，將原本的 reduceRight 換成 reduce，也就是說將逆序歸併改爲了正序，我們不一定和 Redux 源碼完全相同，是根據相同的思路來實現串行中間件的需求。
個人覺得改成正序歸併後更難理解，所以還是將上面代碼結合案例進行拆分，中間件依然是 fn1、fn2 和 fn3，由於 reduce 並沒有傳入初始值，所以此時 a 爲 fn1，b 爲 fn2。
// 第 1 次 reduce 的返回值，下一次將作爲 a
arg => fn1(() => fn2(arg));
// 第 2 次 reduce 的返回值，下一次將作爲 a
arg => (arg => fn1(() => fn2(arg)))(() => fn3(arg));
// 等價於...
arg => fn1(() => fn2(() => fn3(arg)));
// 執行最後返回的函數連接中間件，返回值等價於...
fn1(() => fn2(() => fn3(() => {})));所以在調用 reduce 最後返回的函數時，傳入了一個空函數作爲參數，其實這個參數最後傳遞給了 fn3，也就是第三個中間件，這樣保證了在最後一箇中間件調用 next 時不會報錯。
2、升級爲支持異步
下面有個更艱鉅的任務，就是將上面的代碼更改爲支持異步，實現如下。
// 文件：app.js
app.compose = function() {
return Promise.resolve(
app.middlewares.reduce((a, b) => arg =>
Promise.resolve(a(() => b(arg)))
)(() => Promise.resolve())
);
};實現異步其實與逆序歸併是一個套路，就是讓每一箇中間件函數的返回值都是 Promise，並讓 compose 也返回 Promise。
使用 async 函數實現
這個版本是我在之前在學習 Koa 源碼時偶然在一位大佬的一篇分析 Koa 原理的文章中看到的（翻了半天實在沒找到鏈接），在這裏也拿出來和大家分享一下，由於是利用 async 函數實現的，所以默認就是支持異步的，因爲 async 函數會返回一個 Promise。
// 文件：app.js
app.compose = function() {
// 自執行 async 函數返回 Promise
return (async function () {
// 定義默認的 next，最後一箇中間件內執行的 next
let next = async () => Promise.resolve();
// middleware 爲每一箇中間件函數，oldNext 爲每個中間件函數中的 next
// 函數返回一個 async 作爲新的 next，async 執行返回 Promise，解決異步問題
function createNext(middleware, oldNext) {
return async () => {
await middleware(oldNext);
}
}
// 反向遍歷中間件數組，先把 next 傳給最後一箇中間件函數
// 將新的中間件函數存入 next 變量
// 調用下一個中間件函數，將新生成的 next 傳入
for (let i = app.middlewares.length - 1; i >= 0; i--) {
next = createNext(app.middlewares[i], next);
}
await next();
})();
};上面代碼中的 next 是一個只返回成功態 Promise 的函數，可以理解爲其他實現方式中最後一箇中間件調用的 next，而數組 middlewares 剛好是反向遍歷的，取到的第一個值就是最後一箇中間件，而調用 createNext 作用是返回一個新的可以執行數組中最後一箇中間件的 async 函數，並傳入了初始的 next，這個返回的 async 函數作爲新的 next，再取到倒數第二個中間件，調用 createNext，又返回了一個 async 函數，函數內依然是倒數第二個中間件的執行，傳入的 next 就是上次新生成的 next，這樣依次類推到第一個中間件。
因此執行第一個中間件返回的 next 則會執行傳入的上一個生成的 next 函數，就會執行第二個中間件，就會執行第二個中間件中的 next，就這樣直到執行完最初定義的的 next，通過案例的驗證，執行結果與洋蔥模型完全相同。
至於異步的問題，每次執行的 next 都是 async 函數，執行後返回的都是 Promise，而最外層的自執行 async 函數返回的也是 Promise，也就是說 compose 最後返回的是 Promise，因此完全支持異步。
這個方式之所放在最後，是因爲個人覺得不好理解，我是按照自己對這幾種方式理解的難易程度由上至下排序的。
總結
或許你看完這幾種方式會覺得，還是 Koa 對於 compose 的實現方式最容易理解，你也可能和我一樣在感慨 Redux 的兩種實現方式和 async 函數實現方式是如此的巧妙，恰恰 JavaScript 在被別人詬病 “弱類型”、“不嚴謹” 的同時，就是如此的具有靈活性和創造性，我們無法判斷這是優點還是缺點（仁者見仁，智者見智），但有一點是肯定的，學習 JavaScript 不要被強類型語言的 “墨守成規” 所束縛（個人觀點，強類型語言開發者勿噴），就是要吸收這樣巧妙的編程思想，寫出 compose 這種優雅又高逼格的代碼，路漫漫其修遠兮，願你在技術的路上 “一去不復返”。