如何用 Postman Mock Server 快速建立 API Server

如何用 Postman Mock Server 快速建立 API Server

本篇要解決的問題

以前遇到過一種狀況,就是當 API server 有問題時,前端呼 API 會一直收不到 response。當時一陣驚慌,雖然頁面還在開發階段,但總不能等 server 修好後才繼續往下開發。

後來聽朋友說 Postman 有一個 Mock Server,可以當 API 的 server 來使用,因為之前遇到狀況,就硬著頭皮直接看 UI 亂按,還真的給試了出來。

這幾天回頭看了官方文件,有更了解 Mock Server 當 API Server 的用法,就整理成這篇,以便下次又遇到問題時,可以看這篇建一個臨時的出來。

本篇是 Postman Mocker Server 的簡易操作,主要是快速建立一個可以 response 的偽 API Server。

Postman Mock Server 的說明文件寫的很豐富,這篇只是用到了其中的冰山一角就很夠用了,有興趣的朋友可以到官網去翻文件。

另外,Postman 有提供測試用的隨機假資料,想說用也用了,就順便建立一個假資料生成器出來,之後再寫範例需要用到假資料時,就可以直接 request 後拿到幾筆假資料,不用再依靠其他線上生成器。

參考文件:


建立 Mock Server

下載完 Postman,開啟 App,點擊左上角的「New」,再點擊選單裡的「Mock Server」:

點擊 New > Mock Server
點擊 New > Mock Server

接著出現的第一個表單,是要選 Method 跟填寫 request 的 URL path。

因為之後主要是要拿隨機的人物假資料,Method 我們直接選「GET」,path 填「getUser」:

選 Method 跟填 path
選 Method 跟填 path

Response Body 的部份我們之後在寫,這邊先不填,直接點「Next」。

這是廣告,點擊一下可以幫本站多個一點點的廣告收入,謝謝

path 後續都可以再新增或修改,不用急著在這邊就把想要的 path 全部設完。

下一步會出現第二張表單,要填的是這個 Mock Server 的名字,以及是否要讓這個 Server 是私人的:

填寫 Server 名稱跟選擇是否 private
填寫 Server 名稱跟選擇是否 private

名字的部份自己看得懂就可以,也可以填中文。Augustus 這邊來填「取得隨機假資料」(就是這麼直接)。

「Make this mock server private」是指要不要讓這個 Mock Server 是私人的。

沒有勾,代表是公開,知道 URL 的人就可以發送請求並取得回應。

有勾,代表是私人,即便路人知道了 URL,但發送請求時 Headers 裡沒有帶上 key 也一樣取不到回應。

後面幾段 Demo 為了方便,就不打勾,這樣在測試時就可以直接拿 URL 來測。

至於私人的話要怎麼取得 key,本篇後面會寫如何新增一個 Postman API key。

填寫好 Server 名稱跟選好是否為私人,就可以點擊「Create Mock Server」。

點擊後 Postman 就會秀出這個 Mock Server 的 URL:

Mock Server URL
Mock Server URL

剛剛我們在建立 path 時,前面有自動帶了一個 {{url}} 的變數,下一段我們會把 {{url}} 給替換成得到的 URL,比方我們這邊取到的 URL 是:

https://2ea7ee58-3881-4e72-961f-5c6ec20f1a72.mock.pstmn.io

再加上我們設的 path 就會是:

https://2ea7ee58-3881-4e72-961f-5c6ec20f1a72.mock.pstmn.io/getUser

Mock Server 建立完後,Postman 的側邊選單就會多出了一個 Collection:

新增的 Collection
新增的 Collection

點擊資料夾,會秀出有哪些 path。點擊右上角的三角 icon,會出現這個 Collection 的資料區塊,繼續點擊資料區塊的「Mocks」,就可以看到有哪些 Mock Server,會看到我們剛剛建立出來的:

Collection > Mocks
Collection > Mocks

以上,我們就成功新增了一個 Mock Server。


設定 Mock Server response

有了 API Server,接下來就是要設定當 URL 收到請求時要給什麼回應。

替換 {{url}}

先點到 Collection 的 path,會看到面版上出現我們上一步中的設定:

request URL
request URL

首先第一步也是最重要的一步,就是把 {{url}} 換成我們 Mock Server 的 URL,換好後會像這樣:

替換 {{url}}
替換 {{url}}

如果 {{url}} 沒換,之後在測試時會報錯。

建立 response

點擊右上角的「Examples」,會出現「Default」、「Add Example」二個選項:

點擊 Examples
點擊 Examples

Default 就是預設會有的一個回應範例,我們點進去就會進到修改的面版:

Examples 修改面版
Examples 修改面版

最重要的修改部份有二塊,就是上圖的「EXAMPLE REQUEST」、「EXAMPLE RESPONSE」,就是我們一般呼 API 時會帶上的參數,跟會收到的回應。

example request,選填,是讓 Mock Server 可以收到不同的參數。如果我們需要讓 API 收到不同的參數而給不同的回應,就需要填。

如果建了二個 Examples,而這二個的 example request 都沒填上任何參數,看文件是說,Mock Server 就會從二個中去選一個適合的當作 response。

但……沒翻到選的原則是什麼 XD~ 所以如果有二個以上的 Examples,就必要填寫來作區分。

example response,就是本篇最重要的,讓 Mock Server 給的回應。

現在前端收到的 response 大部份是 JSON,因此我們可以先把格式選擇到 JSON,然後先隨意填幾個回應的值:

隨意寫個 response
隨意寫個 response

response 寫完後,按下「Save Example」,Example 就更新完成,可以測試了:

按下 Save Example,更新完成
按下 Save Example,更新完成

測試的部份,可以直接拿 Postman 測,或直接寫一個 JavaScript 來測。

這邊我們直接在 JS Bin 來寫一段作測試:

const uri = 'https://2ea7ee58-3881-4e72-961f-5c6ec20f1a72.mock.pstmn.io/getUser';

fetch(uri)
  .then(res => res.json())
  .then(res => console.log(res))

在 Console 上按下「Run」就可以看到成功取得 response:

成功取得 response
成功取得 response

以上,我們就完成了用 Postman Mock Server 來當 API Server 的部份。

接下來幾段,會來實際做出一個隨機假資料生成器,可以判斷參數給完整資料或簡易資料。


response 給隨機資料

Postman 本身就有提供給隨機資料的參數,主要在 example response 那邊把固定值改填參數就行,在 文件 中給的範例是這樣:

{
  "name": "{{$randomFullName}}",
  "userName": "{{$randomUserName}}",
  "location": "{{$randomCity}}",
  "company": "{{$randomCompanyName}}",
  "jobTitle": "{{$randomJobTitle}}",
  "updatedAt": "{{$timestamp}}"
}

收到的 response 就會像這樣:

{
  "name": "Cielo McClure",
  "userName": "Aurelie.Lockman",
  "location": "Kubhaven",
  "company": "Runolfsdottir, Bernhard and Hodkiewicz",
  "jobTitle": "Direct Branding Liaison",
  "updatedAt": "1565088856"
}

Postman 有的隨機參數官方都整理在這:Dynamic variables

本篇 Demo 會給二種 User 資料:完整、簡易。

完整資料如下:

{
  "uuid": "{{$randomUUID}}",
  "name": "{{$randomFullName}}",
  "email": "{{$randomEmail}}",
  "phone": "{{$randomPhoneNumber}}",
  "location": "{{$randomCountry}}, {{$randomCity}}, {{$randomStreetAddress}}",
  "company": "{{$randomCompanyName}}",
  "job": "{{$randomJobType}}",
  "thumbnail": "{{$randomAvatarImage}}",
  "verify": {{$randomBoolean}},
  "updatedAt": "{{$timestamp}}"
}

簡易資料如下:

{
  "uuid": "{{$randomUUID}}",
  "name": "{{$randomFullName}}",
  "email": "{{$randomEmail}}",
  "phone": "{{$randomPhoneNumber}}",
  "thumbnail": "{{$randomAvatarImage}}"
}

至於什麼時候給完整、什麼時候給簡易,就用收到的參數而定。


針對不同 request 參數,給不同 response

文件上給的 Demo,要針對不同參數給不同回應的方法,就是寫多個 Examples。

首先我們來處理給完整資料的部份。

點擊「Examples」,點擊「Add Example」:

點 Add Example
點 Add Example

接著來填寫名稱、example request、example response:

填寫名稱、example request、example response
填寫名稱、example request、example response

名稱的部份取一個自己認得的,以免之後忘記這個 Example 是做什麼用。

example request 一定要填,這邊填的是 KEY: data, VALUE: full

我們在 Ajax 時就帶上這個 data 就行。

完整資料好了,接下來處理簡易資料。

一樣按下「Examples > Add Example」,這次改填以下:

填寫名稱、example request、example response
填寫名稱、example request、example response

example request 給的參數要不一樣,這邊填的是 KEY: data, VALUE: simple

現在我們有了二個 Examples,可以來測試了。

首先來測完整資料:

const uri = 'https://2ea7ee58-3881-4e72-961f-5c6ec20f1a72.mock.pstmn.io/getUser';

fetch(uri + '?data=full')
  .then(res => res.json())
  .then(res => console.log(res))

執行後成功取得完整資料:

取得完整資料
取得完整資料

最後來測試簡易資料:

const uri = 'https://2ea7ee58-3881-4e72-961f-5c6ec20f1a72.mock.pstmn.io/getUser';

fetch(uri + '?data=simple')
  .then(res => res.json())
  .then(res => console.log(res))

執行後成功取得簡易資料:

取得簡易資料
取得簡易資料

新增 Postman API Key

前面幾段有提到,如果 Mock Server 選了 private,就會需要一組 API Key,不然 Ajax 也一樣取不到資料。

本段是寫如何取得。

進到頁面:https://go.postman.co/settings/me/api-keys

點擊「Generate API Key」:

點擊 Generate API Key
點擊 Generate API Key

幫 key 取一個以後看得懂在幹麻的名字:

為 key 取名字
為 key 取名字

取好後再次點擊「Generate API Key」,就會產生 key:

產生 key
產生 key

上面還貼心的提醒說記得立馬 copy,因為這是我們這輩子唯一見得到這 key 的機會。

Copy 完後按下關閉,我們就會看見剛剛生成的 key 出現在列表上:

API keys 列表
API keys 列表

之後我們只要在 request 時附上 key 到 Headers 上就可以,像這樣:

const uri = 'https://2ea7ee58-3881-4e72-961f-5c6ec20f1a72.mock.pstmn.io/getUser';

fetch(uri + '?data=simple', {
  headers: {
    'x-api-key': 'PMAK-5f7ed9e51XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'
  }
})
  .then(res => res.json())
  .then(res => console.log(res))

可以成功看到取得資料:

用 x-api-key 成功取得資料
用 x-api-key 成功取得資料

如果沒有帶上 key,就會收到錯誤訊息:

沒用 x-api-key 會收到錯諤訊息
沒用 x-api-key 會收到錯誤訊息

Summary
如何用 Postman Mock Server 快速建立 API Server
Article Name
如何用 Postman Mock Server 快速建立 API Server
Description
本篇大綱:本篇要解決的問題。建立 Mock Server。設定 Mock Server response。response 給隨機資料。針對不同 request 參數,給不同 response。新增 Postman API Key。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg
訂閱
通知
guest
0 Comments
Inline Feedbacks
看所有留言