mock 請求分發

blueju發表於2021-03-06
Mock

首發於 語雀文件

背景是這樣的

我們公司的後管專案走的不是 resful 風格的 api，而是走後管閘道器，後管閘道器會將請求進行分發，具體怎麼分發，有這麼以下幾點：

  • 請求全部走 POST
  • 請求 URL 統一為 /agrs
  • 資料提交方式為 application/json
  • 資料格式大致分為：
    • 系統報文頭
      • 服務名
      • 介面名
      • 介面版本號
      • 系統標識
    • 本地報文頭
      • 使用者資訊
      • 分頁資訊
      • 裝置資訊
    • 報文體
      • 視具體情況而變化的動態資料
  • 檔案傳輸走 OSS，不走表單檔案流
  • ......

痛點

我們前端當然是不可能等後端開發完了才開始寫程式碼的嘛，因此我們需要 mock，然而閘道器請求分發因為以上的諸多要求，使得 mock 開發十分不方便，有以下：

  1. 按傳統方式建立 mock，那麼請求 URL 開發的時候是一套，打包的時候又要全部改成 /agrs，這。。。

我希望的是開發時和打包時都是一樣的，不需要改來改去兩套標準

  1. 需要新 mock 時，按照 umi 的 mock 規範，需要在 mock 資料夾中建立一個 js 檔案，並預設暴露一個物件，例如：

mock/getApps.js

export default {
	"POST /getApps": {
  	sysHead: {},
    localHead: {},
    body: {},
  }
}

需要多次寫重複程式碼和重複資料結構（sysHead，localHead），而我只想關注 body 中的 mock 資料

我們的是 umi 工程，mock 這塊詳見 Mock 資料

  1. 按照第 2 點，當後端介面的服務名&介面名真正提供後，為了保持一致，我們除了要修改 mock 檔名，還需要修改 mock 檔案中所暴露物件中的 URL 名稱，麻煩。
  2. 要做到第 3 點，還得有個前提，就是 mock 檔名是與該 mock 所攔截的 URL 是一致的，不然那麼多介面看都看不過來，找起來甚是痛苦眼瞎。
  3. 以 js 暴露模組的方式進行 mock，攔截同一 URL 的 mock 是可以被覆蓋而不自知的，不清楚的人會出現明明 mock 的 URL 都正確但響應資料卻對不上，這種一頭霧水的情況
  4. ......


以上不方便，不是憑空想的，因為是付出了時間、人力，得出的確不方便這個結論的，光是以上第一點，就已經夠受了。

解決

總體的思路就是：
只攔截 /agrs 這個 URL，使用 node.js 獲取請求報文 request 中的引數服務名和介面名，按設計好的目錄結構拼接路徑，按路徑讀取檔案並 JSON 格式化，最後返回。


對應以上痛點的解決措施：

  1. 開發時和打包時保持一致，都是用統一 URL：/agrs。
  2. 不使用 js 暴露模組的方式，直接使用 json 檔案，其中放置重點關注的 json 格式 mock 資料，其他重複資料結構會在別處統一整合。
  3. 所設計的目錄規範是：目錄名稱就是服務名，mock 檔名稱就是介面名。（第 2 點已提及不需再定義和暴露，因此如果修改不必之前那麼麻煩，只需要修改目錄名稱和檔名稱即可）
  4. 在任何系統中，同一目錄下是不能出現同名資料夾或同名檔案的，按第 3 點的目錄規範可解決重複覆蓋問題，還能重複別人已有介面。


其他不多說了，直接上 github，也不是人人都會碰到這種情況，只是幫助內部前端小組提升開發體驗的一個小工具庫而已，也是作為一個前端小組長該做的事。

程式碼不復雜，自我感覺更重要的是，不論遇到大小問題，會去想怎麼解決比較好，不斷總結，不斷積累吧。

Github

https://github.com/blueju/mock-request-distribute

相關文章