跳至主要内容

Postman Mock Server

Mock Server && Mock Api

透過 Mock Server 來建立 Mock API ,可以模擬 API 的行為,包括接收和處理 request 請求,返回預定義的 response 或模擬錯誤情況。


在開發初期,最常見的需求是希望前端能夠在後端尚未完成實作之前繼續進行開發, 或者當不只是一個部門再開發時,可能需要與其他部門合作,等待對接 API 資料時, 透過使用 Mock API,不僅可以節省開發時間,還能讓前後端團隊更具體地討論實作細節,實現品質和速度的雙贏。

圖片參考來源: https://selfdesigning.blogspot.com/2022/10/postman-mock-server.html

此外,學習 Mock API 有以下好處:

  1. 獨立快速開發:前端 / QA 開發不需等待, 能快速就能搭建 Mock Server 各自實作 Mock API, 並且可隨時討論修改介面。
  2. 避免依賴性:可減少對後端服務的依賴。當後端 API 尚未開發完成時,前端或是其他團隊成員可以使用模擬的 response 繼續進行前端或其他模組的開發。
  3. 測試和驗證:Mock API 允許 前端 / QA 模擬不同情況、錯誤和 response 進行測試和驗證。在實際後端服務可用之前提前測試,確保軟體或應用程式正確運作。
  4. 破除第三方依賴: 假設在公司業務流程的某一個步驟需要獲取第三方服務的正確返回才能繼續進行,那麼在測試中就可以用 Mock Server,直接模擬外部 API 的響應來斷言系統的正確行為。在測試環境避免呼叫第三方收費服務。比如,email 寄信或是收費的,在測試環境就可以不呼叫,以節省費用。

預期達到效果: API 開發、測試、除錯一次到位,等後端完成 API 後,工程師只需要切換網址就能使用真實資料。

圖片參考來源: https://tw.alphacamp.co/blog/learn-api-and-mock-service-worker

了解如何使用 Mock API 後,我們可以先請後端提供 API 規格,包括 API 的 URL、方法、請求參數和回應等。然後,我們可以根據這些規格建立 Mock API,這樣我們就可以在完成前端介面後立即開始串接 API。同時,後端團隊可以專注於開發實際的 API,這樣就實現了同步開發,避免了前端一直等待後端提供 API 的情況。因此,Mock API 的概念實際上是一種很好的開發模式!


Mock API 是一個概念,而要做到這個觀念的工具非常多,例如:Postman、Mocky、MockServer、Mockoon 等等,而這一篇我將會主要介紹在開發上常用的 Postman 這套工具。


建立 Mock Server

參考流程

  1. 在 Postman 的左側選擇建立 Mock servers

    如果不是選擇已經存在的 API Collection,就需要至少填寫一個 Request URL 讓 Collections 有初始化的 API Request

  2. 幫 Mock Server 取個名字,並建議你勾選儲存 mock server URL 到環境變數的選項。

  3. 已建立 Mock server

  4. 去 Environments Tab 檢查是否成功建立 Mock server Variable

參考資料


Mock API Response

針對每個 endpoint,創建 example
參考 JSONPlaceholder 提供的 api endpoint 和 假資料

  1. 到 Collections Tab 找到剛剛初始化的 Request, {{url}}會帶入環境變數所以右上角請選擇剛剛建立的 mock server name,按下 Send 後會發現下面的 Response 一片空白,這是因為我們還沒設定 Mock Server Response。

  2. 左側 Request 下面有一個 Default,它就是用來自訂 Response 資料結構的 example,這邊我們用 JSON 格式寫個簡單的 Response example 後按 Save。

  3. 回到剛剛的 Request,按下 Send 後會發現 Response 的資料結構跟剛剛填寫的範例相同。

Note: 若要各個 request 新增自訂 response,可點擊 ...,選擇 Add example 後,就可回到步驟 2,新增自訂 response


進階設定

根據不同的 Params 讓 Request 有不同的 Response
參考這隻 API:根據不同的 postId 產生不同的 response

  1. 在 postid = 1 的 endpoint Tab 新增 response

  2. 回到剛剛的 Request ,我們在 postid 填入不同的 VALUE,按下 Send 就會看到對應的 Response


分享 Mock Server

用 Postman 產生 API documentation

  1. 選擇想要產生文檔的 Collection,按下 View documentation 後文檔就會顯示在右側

  2. 當確定文檔內容都沒問題後按 Publish

  3. 可以將 URL 複製起來分享給你的合作夥伴,如果你想把這份文檔下架,按 Unpublish 即可。


讓 Mock Server 變成 private

  1. 在 Mock Servers Tab 打開之前創建的 Server,按下 Edit

  2. 將 Make mock server private 打勾並按下 Save changes。

  3. 回到之前的 Request,會發現按下 Send 後會回傳錯誤訊息,這是因為現在 Mock Server 都需要添加 API key 到 Request 的 Header 才能使用。

  4. Postman 官網 產生 Postman API key

  5. 將 API key 加入 Authorization,key 填上 x-api-key,以及 Value 填上 API key

  6. 加上 api-key 後就能看到正確的 Response 回傳!


查看 Mock Server Log

參考資料


其他建立 Mock Server 工具


參考資料

  1. https://israynotarray.com/other/20230307/1852899605/
  2. https://tw.alphacamp.co/blog/learn-api-and-mock-service-worker
  3. https://learning.postman.com/docs/designing-and-developing-your-api/mocking-data/setting-up-mock/
  4. https://www.potatomedia.co/post/cddf7544-7989-413a-909d-84cbda42d6ae