首發於 語雀文件
背景是這樣的
我們公司的後管專案走的不是 resful 風格的 api，而是走後管閘道器，後管閘道器會將請求進行分發，具體怎麼分發，有這麼以下幾點：
- 請求全部走 POST
- 請求 URL 統一為 /agrs
- 資料提交方式為 application/json
- 資料格式大致分為：
- 系統報文頭
- 服務名
- 介面名
- 介面版本號
- 系統標識
- 本地報文頭
- 使用者資訊
- 分頁資訊
- 裝置資訊
- 報文體
- 視具體情況而變化的動態資料
- 系統報文頭
- 檔案傳輸走 OSS，不走表單檔案流
- ......
痛點
我們前端當然是不可能等後端開發完了才開始寫程式碼的嘛，因此我們需要 mock，然而閘道器請求分發因為以上的諸多要求，使得 mock 開發十分不方便，有以下：
- 按傳統方式建立 mock，那麼請求 URL 開發的時候是一套，打包的時候又要全部改成 /agrs，這。。。
我希望的是開發時和打包時都是一樣的，不需要改來改去兩套標準
- 需要新 mock 時，按照 umi 的 mock 規範，需要在 mock 資料夾中建立一個 js 檔案，並預設暴露一個物件，例如：
mock/getApps.js
export default {
"POST /getApps": {
sysHead: {},
localHead: {},
body: {},
}
}
需要多次寫重複程式碼和重複資料結構（sysHead，localHead），而我只想關注 body 中的 mock 資料
我們的是 umi 工程，mock 這塊詳見 Mock 資料
- 按照第 2 點，當後端介面的服務名&介面名真正提供後，為了保持一致，我們除了要修改 mock 檔名，還需要修改 mock 檔案中所暴露物件中的 URL 名稱，麻煩。
- 要做到第 3 點，還得有個前提，就是 mock 檔名是與該 mock 所攔截的 URL 是一致的，不然那麼多介面看都看不過來，找起來甚是痛苦眼瞎。
- 以 js 暴露模組的方式進行 mock，攔截同一 URL 的 mock 是可以被覆蓋而不自知的，不清楚的人會出現明明 mock 的 URL 都正確但響應資料卻對不上，這種一頭霧水的情況
- ......
以上不方便，不是憑空想的，因為是付出了時間、人力，得出的確不方便這個結論的，光是以上第一點，就已經夠受了。
解決
總體的思路就是：
只攔截 /agrs 這個 URL，使用 node.js 獲取請求報文 request 中的引數服務名和介面名，按設計好的目錄結構拼接路徑，按路徑讀取檔案並 JSON 格式化，最後返回。
對應以上痛點的解決措施：
- 開發時和打包時保持一致，都是用統一 URL：/agrs。
- 不使用 js 暴露模組的方式，直接使用 json 檔案，其中放置重點關注的 json 格式 mock 資料，其他重複資料結構會在別處統一整合。
- 所設計的目錄規範是：目錄名稱就是服務名，mock 檔名稱就是介面名。（第 2 點已提及不需再定義和暴露，因此如果修改不必之前那麼麻煩，只需要修改目錄名稱和檔名稱即可）
- 在任何系統中，同一目錄下是不能出現同名資料夾或同名檔案的，按第 3 點的目錄規範可解決重複覆蓋問題，還能重複別人已有介面。
其他不多說了，直接上 github，也不是人人都會碰到這種情況，只是幫助內部前端小組提升開發體驗的一個小工具庫而已，也是作為一個前端小組長該做的事。
程式碼不復雜，自我感覺更重要的是，不論遇到大小問題，會去想怎麼解決比較好，不斷總結，不斷積累吧。