用 Postman Mock Server 建立 Mock API

用 Postman Mock Server 建立 Mock API

前陣子遇到 API 暫時還打不過取不到資料,但要在那陣子先把前端畫面和串接 API 的部分處理好,所以尋覓了很多 Mock API 的服務。沒想到意外找到 Postman 就有這樣的服務可以用~

身為前端應該對 Postman 不陌生,但最常被使用的通常是 Request 戳 API 的部分,沒想到 Mock Server 也很好用。

如果你也剛好有此需求,就可以依照以下步驟建立看看!

步驟一:建立新的 Mock Server

Request Body 可以先不填寫,後續再進行修改。

建立 Mock Server

步驟二:Mock Server 設定

  1. 為你的 Mock Server 取名
  2. 做細部設定
    • 第一個項目是可以選擇環境檔案來統一一些參數的設定,這樣就可以儲存這個 Mock Server 的 URL 為環境變數,建立後會比較好直接測試 call API
    • Mock server 是否為私有的:私有的話,就會需要設定 x-api-key 在 headers,而 key 的建立可以參考 https://learning.postman.com/docs/developer/intro-api/

這邊若是做為開發 Demo 使用,也可以不勾選,方便直接使用

設定完後就可以直接 Create Mock Server

Mock Server 設定

完成後就會看到 mock server 的 URL,如以下畫面,可以先複製起來,等等方便直接使用。

Mock Server URL

步驟三:回到 Collections,設定 Mock API Data

設定資料

回到 Collections,會發現多了剛剛設定 Mock Server 的名字,此時他已經開好資料夾了。打開後會發現剛剛設定的 API,展開選擇一個 API 的 Default 就可以設定預設資料。

例如: /posts 這邊預設的 Response 會拿到三筆文章資料。

點選右上角的『Save』到這邊就可以成功建立一個 Mock 的 API 了~

可以在 CodePen 一試:

CodePen1

網址參數設定

最強的是可以針斷不同的網址參數做設定,這樣連分頁的功能都能 Mock 呢!

只要在 Collections API 下的 Default 再新增其他假資料,就可以實現,如下圖:

例如: /v2/posts?page1/v2/post?page2

先設定第一頁的資料

第一頁設定

帶入第二頁的參數,並設定第二頁的資料

第二頁設定

最後~ 就可以看到取得分頁後的結果囉!

CodePen2

評論

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×