如何用 Mockoon 快速建立 Mock APIs Server

如何用 Mockoon 快速建立 Mock APIs Server
如何用 Mockoon 快速建立 Mock APIs Server

本篇要解決的問題

之前寫過一篇〈如何用 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 出現在介面上,算是使用範例:

Mockoon Demo
Mockoon Demo

可以看到上面示範了 GET、POST、PUT。

這份 Demo 可以不用刪,之後如果有特殊需求可以直接點來看有沒有示範的寫法,就不用一頁頁去看文件。

建立新環境

我們要先新增一個 environment,才能在上面新增 API,點擊左側選單上方的「+」按鈕:

Add environment
Add environment

點擊後就會自動新增了,接著 App 的介面會像這樣子:

新增 environment 成功
新增 environment 成功

左上角的「New environment」是這個環境的名稱,可以改一個讓自己知道是什麼功能的名稱,像是 member、shop 之類。

上方的「3124」就是 Port 通訊埠,可以更改成我們自己想要的,但一些常用的記得避開,像 3000、8000 之類。

選擇方法、Path

選擇方法、Path
選擇方法、Path

這邊可以自己選調用這個 API 的方法,跟寫上 Path。

嗯……好像沒什麼需要特別寫的,因為就是這麼直覺 😝。

給預設回應

前端調用 API 後,接著會收到 response,要用 Mockoon 給回應的方式就是填在 Body:

Body 裡填上回應
Body 裡填上回應

這邊 August 直接從 JSONPlaceholder 上 copy 一份貼上去,像這樣:

Body 裡填上回應
Body 裡填上回應

開啟 CORS

前端常常會遇到一個麻煩的東西,就是 CORS,一般 API 會死的第一步都是死在這,我們要先開啟允許所有網域都可以調用的設定才行。

點擊右上角的 Environment settings:

點擊 Environment settings
點擊 Environment settings

然後點擊 Add CORS headers to environment headers below:

點擊 Add CORS headers to environment headers below
點擊 Add CORS headers to environment headers below

下方的 Environment headers 就會自動新增允許跨網域的設定:

Environment headers 新增允許跨網域設定
Environment headers 新增允許跨網域設定

Start server

都準備好了以後,最後按下左上角的播放按鈕,這個 API Mock Server 就可以開始使用:

按下 Start server
按下 Start 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 真的好用到炸,還可以想開就開,想關就關,開啟的速度也很快,可以說是前端開發時的神器。

推薦這套開源工具給大家,祝大家開發愉快~ 🙂

Summary
如何用 Mockoon 快速建立 Mock APIs Server
Article Name
如何用 Mockoon 快速建立 Mock APIs Server
Description
本篇大綱:本篇要解決的問題。下載 Mockoon。使用 Mockoon、建立新環境、選擇方法、Path、給預設回應、開啟 CORS、Start server。調用 API。筆記後心得。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg
訂閱
通知
guest

1 Comment
最舊
最新
Inline Feedbacks
看所有留言
Mark
Mark
2 年 之前

感謝版主的教學文章,剛試了一下搭配ngrok一起使用,可以讓外網也能抓到資料
非常實用:)