Mock API 是一種用模擬數據代替真實 API 接口返回的的技術。在開發過程中,前端開發往往依賴後端 API,但後端 API 還在開發中。通過 Mock API,前端無需等待後端 API 開發完成。前端可以用 Mock API 返回的模擬數據來開發。
只需 3 步就能搞定 Mock API。
第 1 步 新建項目
在 Apifox 的 App 首頁,點擊右側的 “新建項目” 按鈕來創建項目。
第 2 步 新建接口
這邊以創建用户詳情接口為例來展示創建接口的功能。
- 請求方法: GET。
- URL: api/user/{id}。其中 {id} 是參數: 表示用户 id。
- 響應類型: json,
- 響應內容:
進入上一步新建項目的首頁,點擊左側的 “+” 按鈕來新建接口。
填寫對應的接口信息並保存:
這樣,用户詳情接口就創建好了。同時,Apifox 根據響應的字段格式和類型,給我們自動創建好了 Mock。點擊 Mock 下的 “快捷請求” 按鈕可查看 Mock 的返回:
我們來看一下 Mock 的返回。點擊“快捷請求” 按鈕,在進入的頁面點擊“發送”。
Mock 的返回還挺像樣子的~
第 3 步 設置 Mock 匹配規則
大家有沒有注意到一個神奇的點,我們給 name 字段設置了 string 類型,為什麼會返回中文人名;給 phone 設置了 string 類型,為什麼會返回手機號;給 avatar 設置了 string 類型,為什麼會返回圖片地址?
原因是,Apifox 支持給 Mock 設置了匹配規則。Apifox 內置了一些規則。用户也可以自定義規則。這些規則可以在 項目設置 > 功能設置 > Mock 設置中看到。
我們也可以給字段設置專門 Mock 規則。點擊字段旁邊的 Mock:
Apifox Mock 匹配的規則是:
- 當字段能滿足某條 匹配規則 時,返回滿足 Mock規則 的隨機內容。
- 當字段不滿足所有 匹配規則 時,則返回滿足該字段類型的隨機內容。
匹配規則支持三種:
- 通配符。
*匹配0或任意多個字符。?匹配1個任何字符。例如:*name能匹配 username, name 等。 - 正則表達式。
- 完全匹配。
Mock規則 完全兼容 Mock.js ,並擴展了一些 Mock.js 沒有的語法(如國內手機號 @phone)。常用有:
- @integer:整數。@integer(min, max)。
- @string:字符串。@string( length ):指定長度的字符串。
- @regexp( regexp ):正則。
- @cname: 中文姓名。
- @url:網址。
開發中,我們可能會遇到靈活、複雜的 Mock 場景。如:根據請求參數的不同,返回不同的定製化內容。id 為 1 時,返回正常的用户信息。id 為 2 時,接口報錯。Apifox 也是支持這種場景的。
知識擴展:瞭解更多 mock 相關知識。
- 什麼是 Mock
- Mock 語法講解