本篇要解決的問題
之前寫過一篇〈如何用 Postman Mock Server 快速建立 API Server〉,用 Postman 雖然方便,但不知道是 August 眼殘,還是 Postman 真的沒有這功能,就是暫停 Mock Server。變成只要 Postman 是打開的狀態下,Mock Server 就會一直運作。
最近因為接的 API 需要多一個身份驗證,在本機開發時很卡,在懶的用 Postman 的狀況下,常常會用上傳到測試機才看結果這種很笨的開發方式。
前陣子在社群上看到有人推薦 Mockoon,可以快速建立一個假的 API Server,重點是,它是開源免費的!
本篇就是介紹一下 Mockoon 這個工具要怎麼使用。
下載 Mockoon
Mockoon 的官方網址在這:https://mockoon.com/。
進到官網後,按下那個大顆的「Download」按鈕,就會下載了。
Mockoon 支援 Windows、Linux、macOS。
下載後就照各個作業系統的安裝方式進行安裝。
使用 Mockoon
打開 Mockoon,會看見預設有一組 API 出現在介面上,算是使用範例:
可以看到上面示範了 GET、POST、PUT。
這份 Demo 可以不用刪,之後如果有特殊需求可以直接點來看有沒有示範的寫法,就不用一頁頁去看文件。
建立新環境
我們要先新增一個 environment,才能在上面新增 API,點擊左側選單上方的「+」按鈕:
點擊後就會自動新增了,接著 App 的介面會像這樣子:
左上角的「New environment」是這個環境的名稱,可以改一個讓自己知道是什麼功能的名稱,像是 member、shop 之類。
上方的「3124」就是 Port 通訊埠,可以更改成我們自己想要的,但一些常用的記得避開,像 3000、8000 之類。
選擇方法、Path
這邊可以自己選調用這個 API 的方法,跟寫上 Path。
嗯……好像沒什麼需要特別寫的,因為就是這麼直覺 😝。
給預設回應
前端調用 API 後,接著會收到 response,要用 Mockoon 給回應的方式就是填在 Body:
這邊 August 直接從 JSONPlaceholder 上 copy 一份貼上去,像這樣:
開啟 CORS
前端常常會遇到一個麻煩的東西,就是 CORS,一般 API 會死的第一步都是死在這,我們要先開啟允許所有網域都可以調用的設定才行。
點擊右上角的 Environment settings:
然後點擊 Add CORS headers to environment headers below:
下方的 Environment headers 就會自動新增允許跨網域的設定:
Start server
都準備好了以後,最後按下左上角的播放按鈕,這個 API Mock Server 就可以開始使用:
調用 API
調用 API 的 URL 就是本機的 IP + 設定的 Port + Path,比方:
http://172.0.0.1:3124/test
如果不知道 IP,也可以直接用 localhost:
http://localhost:3124/test
一個簡單的 GET 如下:
fetch('http://localhost:3124/test') .then(res => res.json()) .then(res => { console.log(res) })
瀏覽器的 Console 上就可以看到成功取回我們設定的回應:
筆記後心得
Mockoon 真的好用到炸,還可以想開就開,想關就關,開啟的速度也很快,可以說是前端開發時的神器。
推薦這套開源工具給大家,祝大家開發愉快~ 🙂
感謝版主的教學文章,剛試了一下搭配ngrok一起使用,可以讓外網也能抓到資料
非常實用:)