博客 / 詳情

返回

API Mock 完整工作流程

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 匹配的規則是:

  1. 當字段能滿足某條 匹配規則 時,返回滿足 Mock規則 的隨機內容。
  2. 當字段不滿足所有 匹配規則 時,則返回滿足該字段類型的隨機內容。

匹配規則支持三種:

  1. 通配符。* 匹配0或任意多個字符。?匹配1個任何字符。例如:*name能匹配 username, name 等。
  2. 正則表達式。
  3. 完全匹配。

Mock規則 完全兼容 Mock.js ,並擴展了一些 Mock.js 沒有的語法(如國內手機號 @phone)。常用有:

  1. @integer:整數。@integer(min, max)。
  2. @string:字符串。@string( length ):指定長度的字符串。
  3. @regexp( regexp ):正則。
  4. @cname: 中文姓名。
  5. @url:網址。

開發中,我們可能會遇到靈活、複雜的 Mock 場景。如:根據請求參數的不同,返回不同的定製化內容。id 為 1 時,返回正常的用户信息。id 為 2 時,接口報錯。Apifox 也是支持這種場景的。

知識擴展:瞭解更多 mock 相關知識。

  • 什麼是 Mock
  • Mock 語法講解
user avatar lanlanjintianhenhappy 頭像 changhao_flag 頭像 lidalei 頭像
3 位用戶收藏了這個故事!

發佈 評論

Some HTML is okay.