一鍵智能Mock，你值得擁有

2022 年 4 月 13 日
筆記

大家好呀，我是一名苦逼的前端開發工程師，為啥苦逼呢，這不，項目下周就要上線了，但是後端還沒給我接口，沒有接口我就無法調試，工作停滯不前，我也只能坐着干著急。

我報告給了我的老闆山哥: 老闆，這後端不靠譜啊，都快上線了，接口還沒出來。

山哥回道，別著急呀，這不有 Mock 嗎？

**Mock，什麼是 Mock 啊？**我一臉狐疑，問向山哥。

山哥慢條斯理說，就是前端自己啟動一個 HTTP 服務，模擬後端接口的數據，這樣就無需等待後端接口開發完成了，不會因為後端開發延誤而阻塞你的工作進程了。

嗯，真是個不錯的注意，我彷彿發現了新大陸！以後再也不用受後端拖累了，心裏暗暗開心，但轉念一想不對啊，時間不夠啊！

我又沮喪了下來，轉頭向山哥說道: Mock 好是好，但是時間不夠了啊，我重新啟動一個 Mock HTTP Server，也要花不少時間呀。

山哥見我開了竅，又忙不迭地說: 咱們團隊不是用的 Apifox 管理 API 嗎，只需要點下按鈕，就可以自動 Mock！

一鍵 Mock 數據，這麼簡單，那應該怎麼使用 Apifox 自動 Mock 呢？

山哥接下來，緩緩道來。

使用 Apifox 智能 Mock

Apifox，API 文檔、API 調試、API Mock、API 自動化測試集成於一體的強大工具，可以在 Apifox官網直接下載，在 Windows、Linux、Mac 下都可以使用。

下載成功後，可打開其中的示例項目，是一個關於寵物店的項目。打開寵物店的項目，可以在每個標籤頁看到四個標籤: 文檔、修改文檔、運行、高級 Mock。

我們先看下這個查詢寵物詳情的接口，其請求接口為 /pet/{petId}，而響應數據為 code 與 data，data 是一個 Pet 的一個自定義數據類型。

在數據模型選項卡中，可以看到 Pet 這個自定義數據類型，其中有兩個字段為 id、name 和 photoUrls。

在我們的本地是肯定沒有寵物店的這個項目和接口的，那我們現在就可以使用一鍵 Mock 服務，請求 Mock 出來的寵物店數據，非常方便！

切換環境為Mock服務，此時地址欄前綴為 //127.0.0.1:4523/mock/533840，點擊運行按鈕發送請求，見證奇蹟的時刻到了，數據正確返回！

在項目中進行 Mock 時，使用 //127.0.0.1:4523/mock/533840 代替後端的 API 前綴即可，特別好用是不是！

但這僅僅是 Apifox 強大的只能 Mock 下的冰山一角！

假設，我們有一個用戶接口，它有一個字段 email 期待返回郵箱格式的數據，一個字段 phone 期待返回手機格式的數據，一個字段 avatar 期待返回一個頭像，而這在 Apifox 下都可以零配置完成！

這就是，Apifox 強大的智能 Mock 規則: 你需要做的僅僅是定義 API 接口文檔中的響應數據，接下來一鍵 Mock 服務，全部只能工作都交給 Apifox 的智能 Mock 來完成。

在 Apifox 內部，當接口響應的數據字段未配置 mock 規則時，系統會自動使用智能 Mock 規則來生成數據，以實現使用時零配置即可 mock 出非常人性化的數據。根據項目設置、功能設置、智能 Mock 設置即可打開默認配置。

除此之外，Apifox 還可以根據高級設置，對字段進一步的限制，如

字符串長度限定，及正則限定
數字最大最小的限定
枚舉類型

舉一個示例，寵物售賣狀態總共有三種：在售、待上架、已售。我們可以通過高級設置的枚舉類型來完成，如下圖所示：

使用 Apifox 自定義 Mock

在 Apifox 自動 Mock 非常方便，但我們需要自定義 Mock 功能，在上個接口中，寵物有一個字段是 name，表示寵物的名字，我們可不可以將寵物的名字僅僅定位為兩個字符。

我們在 Apifox 數據模型設置中找到該寵物的數據模型，並配置其 name 字段。

@cword(3) 是Apifox 的 Mock 語法，完全兼容 Mock.js（數據佔位符方式），並擴展了一些 Mock.js 沒有的語法（如國內手機號 @phone）。

如現有 Mock 語法無法滿足需求，建議使用正則表達式 @regexp 來實現靈活的定製。正則表達式基本能滿足各種特殊場景的需求。

而我們將寵物的名字限制為兩個字符，即可使用: @cword(2) 替代。

Apifox 的高級 Mock

Apifox 的智能 Mock 與自定義 Mock 已經足夠強大，但是他的功能遠不止於此。我們儘管可以使用自定義 Mock 對數據進行每個字段更為精細的模擬，但遠遠無法滿足複雜業務的多樣性。

以以上查詢寵物詳情的接口為例，難免有記錄不存在的示例，此時接口響應為完全不同的數據類型。此時，我們可以使用 Apifox 的高級 Mock 用以模擬數據。

當我們查詢寵物的 ID 為3時，返回不存在數據的相應格式，同時設置狀態碼為 404。

為了滿足業務的多樣性，我們還可以使用基於模板的高級 Mock 功能與 Apifox 的 Mock 語法相結合。這裡使用了 Javascript 的 nunjucks 模板語法，可以生成你想生成的任意數據。

小結

今天關於 Apifox 強大的 Mock 功能就介紹到了這裡，除了這些功能外，它還有以下更強大的功能:

接口設計：Apifox 接口文檔遵循 OpenApi 3.0 (原 Swagger)、JSON Schema 規範的同時，提供了非常好用的可視化文檔管理功能，零學習成本，非常高效。並且支持在線分享接口文檔。
數據模型：可復用的數據結構，定義接口返回數據結構及請求參數數據結構（僅 JSON 和 XML 模式）時可直接引用。支持模型直接嵌套引用，直接 JSON/XML 智能導入，支持 oneOf、allOf 等高級組合模式。
接口調試：Postman 有的功能，比如環境變量、前置/後置腳本、Cookie/Session 全局共享等功能，Apifox 都有，並且比 Postman 更高效好用。接口運行完之後點擊保存為用例按鈕，即可生成接口用例，後續可直接運行接口用例，無需再輸入參數，非常方便。自定義腳本 100% 兼容 Postman 語法，並且支持運行 javascript、java、python、php、js、BeanShell、go、shell、ruby、lua 等各種語言代碼。
接口用例：通常一個接口會有多種情況用例，比如參數正確用例、參數錯誤用例、數據為空用例、不同數據狀態用例等等。運行接口用例時會自動校驗數據正確性，用接口用例來調試接口非常高效。
接口數據 Mock：內置 Mock.js 規則引擎，非常方便 mock 出各種數據，並且可以在定義數據結構的同時寫好 mock 規則。支持添加「期望」，根據請求參數返回不同 mock 數據。最重要的是 Apifox 零配置即可 Mock 出非常人性化的數據，具體在本文後面介紹。
數據庫操作：支持讀取數據庫數據，作為接口請求參數使用。支持讀取數據庫數據，用來校驗(斷言)接口請求是否成功。
接口自動化測試：提供接口集合測試，可以通過選擇接口（或接口用例）快速創建測試集。目前接口自動化測試更多功能還在開發中，敬請期待！目標是：JMeter 有的功能基本都會有，並且要更好用。
快捷調試：類似 Postman 的接口調試方式，主要用途為臨時調試一些無需文檔化的接口，無需提前定義接口即可快速調試。
代碼生成：根據接口及數據數據模型定義，系統自動生成接口請求代碼、前端業務代碼及後端業務代碼。
團隊協作：Apifox 天生就是為團隊協作而生的，接口雲端實時同步更新，成熟的團隊/項目/成員權限管理，滿足各類企業的需求。

你是不蠢蠢欲動也想下載嘗試一下呢？

客戶端下載地址：www.apifox.cn
API Hub網頁版地址：//www.apifox.cn/apihub/