前端的痛苦

作為前端，最痛苦的是什么時候？

每個迭代，需求文檔跟設(shè)計稿都出來了，靜態(tài)頁面唰唰兩天就做完了?？墒亲銮岸擞植皇呛唵蔚匕押蠖送鲁鰜淼臄?shù)據(jù)放到頁面上就完了，還有各種前端處理邏輯啊。

后端接口還沒出來，我就得邊寫代碼邊測前端效果，又沒有真實數(shù)據(jù)。有人建議用 Mock 工具，可是每個接口都要自己寫 Mock 規(guī)則，這得浪費多少時間呀。

等到后端好不容易把接口寫出來了，一對接聯(lián)調(diào)，好多字段的數(shù)據(jù)又跟我 Mock 的數(shù)據(jù)對不上，又得重新改代碼。

每個迭代都是一場折磨。

就是那種，明明知道這個地方整個團隊都可以更有效率，但偏偏就是做不到的無力感。

黎明的希望

直到有一天，我遇到這個神器。我的效率提升了 100%。

我可以用最省力最優(yōu)雅的方式得到我需要的 Mock 數(shù)據(jù)，甚至不需要任何配置。而且，聯(lián)調(diào)時候曾經(jīng)遇到的各種令人崩潰的前后端數(shù)據(jù)對接問題，統(tǒng)統(tǒng)不！見！了！

就是這個：

Apifox

我研究了整整一周，越研究越是心驚。這個工具太強大，完全超出我的預(yù)期，就如《倚天屠龍記》里張無忌修煉的乾坤大挪移，練完一層，上面還有一層，每一層都是一片全新的天地。

我曾經(jīng)以為，定接口什么的你們后端定就行了，跟我前端有什么關(guān)系。定好了吐數(shù)據(jù)給我就行了。

我曾經(jīng)以為，寫接口文檔什么的完全是浪費時間，邊寫代碼邊改接口不好嘛。

直到我遇到這個神器，我才明白好的工作習(xí)慣能給我提升多少效率。

現(xiàn)在的我已經(jīng)不一樣了。我認(rèn)為這款神器能夠把全中國前端程序員的工作效率都提升一倍。我也希望在讀這篇文章的你，能夠好好把這款工具用起來。

好，接下來我要發(fā)功了。

第一層：智能 Mock

Apifox 是個 API 協(xié)作工具，用它來做 Mock 數(shù)據(jù)的基礎(chǔ)也是 API 文檔。在 Apifox 里維護的 API 可以生成好看的在線接口文檔，也可以像 Postman 那樣一鍵調(diào)試，像 JMeter 那樣做測試，還可以直接 Mock 數(shù)據(jù)。不過今天我們只聊 Mock。

首先，你需要在 Apifox 里面創(chuàng)建一個接口，定義好請求參數(shù)和返回數(shù)據(jù)結(jié)構(gòu)。

好了，保存。完成！

……………………

等會兒？Mock 呢？怎么就完成了？Mock 規(guī)則在哪兒寫？

真的就完成了。

Apifox 會自動啟動一個本地的 Mock 服務(wù)，我復(fù)制一下 Apifox 自動生成的 Mock 地址，用瀏覽器打開看下效果。

Apifox 本地 Mock 服務(wù)

就是這么簡單!就是這么方便！

什么！都不需要！配置！

其實我們遇到的大部分 API 返回數(shù)據(jù)都是通用的，用戶名、手機號、地址、郵箱、時間戳，等等等等。但是你要去寫 Mock 規(guī)則就很麻煩。你要怎么生成一個看起來合理的中國人名？

在 Apifox 里面，這變成了最簡單的事情，甚至是完全無感的。只要寫 API 文檔的時候把返回的數(shù)據(jù)結(jié)構(gòu)定義好，這個事情就完成了。Apifox 會根據(jù)字段名稱智能生成 Mock 數(shù)據(jù)，不需要任何配置。

• 如接口返回的數(shù)據(jù)結(jié)構(gòu)里某個字段名稱叫username就會得到“程敏”“王寧”“安慕?！薄袄瞵旇怠薄?/li>
• 字段名稱叫phone，就會得到15237829132、18907284633。
• 字段名稱叫city，就會得到杭州市、高雄市、博爾塔拉蒙古自治州。
• 甚至如果你的字段名稱叫icon，就會返回一個圖片 URL，打開就真的是一張 png 圖片！

如果你們團隊使用的是 Swagger 等其他工具管理 API 文檔，也可以導(dǎo)入到 Apifox(Apifox 支持 20 多種格式數(shù)據(jù)導(dǎo)入，還可以設(shè)置定時自動導(dǎo)入)，一樣可以使用這個智能 Mock，一樣是零配置自動生成所有 Mock 數(shù)據(jù)。

完全不用操心任何 Mock 數(shù)據(jù)配置的問題，只要接口定好了，Mock 數(shù)據(jù)就有了，我什么前端代碼都能寫。

第二層：自定義智能 Mock 規(guī)則

有的同學(xué)問，你這個都是預(yù)設(shè)死的吧？我怎么知道寫什么參數(shù)名稱你會給我 Mock 出什么數(shù)據(jù)來？好，這就是 Apifox Mock 功能的第二層：自定義智能 Mock 規(guī)則。

在 Apifox 里面內(nèi)置了一整套 Mock 規(guī)則，當(dāng)我們的返回字段名匹配上了其中的某條規(guī)則，就會根據(jù)對應(yīng)規(guī)則生成隨機值(Mock.js 語法規(guī)則)。

Apifox 內(nèi)置智能 Mock 規(guī)則

字段名稱的匹配方式支持通配符和正則表達(dá)式，比如字段只要以 “url” 結(jié)尾，就會得到一個正確的網(wǎng)址；以 “mail” 打頭，就會得到一個郵箱地址。

要是以 “time” 結(jié)尾，那還會自動根據(jù)字段的數(shù)據(jù)類型來 Mock 值：string 類型的話就返回一個 'yyyy-mm-dd hh:mm:ss' 格式時間；integer 類型的話就返回一個時間戳。是不是很智能？！

有內(nèi)置規(guī)則，當(dāng)然就可以自定義新規(guī)則。

比如我們公司的訂單 id 是以 “DD” 打頭的十位數(shù)字，我就可以新建一個 string 類型的規(guī)則，匹配規(guī)則寫 “*orderid” ， mock 規(guī)則寫一個正則表達(dá)式：@regexp(/DD\d{10}/)。這樣，只要我任何一個接口返回字段是以 “orderid” 結(jié)尾，都會得到一個 “DD1284918414” 這樣的返回值。

第三層：返回字段高級設(shè)置

有的同學(xué)說，你這個是比較通用的數(shù)據(jù)類型，可我還有很多沒那么通用的類型，比如寵物店上架的寵物，有三種狀態(tài)：可售、已售、待上架，要怎么 Mock 出來？

在 Apifox 里面，定義接口返回數(shù)據(jù)結(jié)構(gòu)的時候每個字段都有一個“高級設(shè)置”的概念。比如我寵物的上架狀態(tài)還可以定義為枚舉，枚舉可選值為(“available”，“sold”，“pending”)。如果接口這樣定義了，那么 Mock 就會自動從這三個字符串里取值。

返回字段高級設(shè)置

這個字段高級設(shè)置里不止有枚舉，還可以設(shè)置長度范圍、正則規(guī)則等。如果字段類型是數(shù)字，還可以設(shè)置最大值最小值等。

如果你對 JSON Schema 比較熟的話，也可以直接寫 Schema，那可定義空間就更大了。

而且我們要注意：這個時候我們設(shè)的其實不是 Mock 規(guī)則，而是接口返回值的數(shù)據(jù)結(jié)構(gòu)定義，這個是會對接口調(diào)試的自動校驗功能生效的，如果后端接口返回的數(shù)據(jù)不符合這里的設(shè)置，Apifox 會返回一個“數(shù)據(jù)結(jié)構(gòu)校驗失敗”，就告訴后端你接口返回數(shù)據(jù)結(jié)構(gòu)不對。

而我們的 Mock 數(shù)據(jù)也是根據(jù)這里的設(shè)置自動生成，不需要任何額外配置。

懟后端專用圖

爽不爽，可以直接甩一張截圖去懟后端了。

第四層：接口級自定義 Mock

有的同學(xué)說，那我還有一種場景，比如我這個用戶名字段，數(shù)據(jù)定義里其實是允許他輸入任意字符串的，可是我 Mock 是需要一個真實姓名的，不能靠字段定義啊。

而且，你剛才演示的都是中國人名，我的客戶都是歐美人怎么辦。

啊，終于要針對特定接口設(shè)置一點點規(guī)則了。

可選的 Mock 規(guī)則

在 Apifox 里，給接口定義數(shù)據(jù)結(jié)構(gòu)的時候是可以給每個字段設(shè)置 Mock 規(guī)則的，而且直接就可以選一系列的常用 Mock 規(guī)則，常見的各種數(shù)據(jù)類型其實都齊全了。比如我需要一個外文人名，我就可以在這里寫 @name，運行一下就會得到 “Larry Smith” “Susan Lee” 這樣的英文名。

如果前面說的智能 Mock 滿足不了你，在這里設(shè)置規(guī)則就可以覆蓋掉內(nèi)置規(guī)則。這里支持 Mock.js 和正則表達(dá)式，只要你能想到的規(guī)則，全都 Mock 得出來。

Mock 規(guī)則參考

而且 Apifox 支持 數(shù)據(jù)模型(Schema) 定義，不同的接口可以復(fù)用相同的數(shù)據(jù)模型，模型里定義的規(guī)則在所有引用它的接口里都會生效，不需要任何額外的配置。

一次 Mock，終身享受。

第五層：高級 Mock

還有那么一些同學(xué)，他們說，希望能讓我自己定義：根據(jù)不同的參數(shù)值，返回不同的數(shù)據(jù)。

比如我請求的參數(shù)寵物ID 為 1 就返回一個在售的寵物數(shù)據(jù)，如果寵物ID 為 2 就返回一個已售的寵物數(shù)據(jù)。我前端可以把幾種狀態(tài)的頁面都做出來。

好吧，Apifox mock 的第五層就是為你準(zhǔn)備的。

在 Apifox 的“接口管理” 有一個 “高級 Mock” 標(biāo)簽頁。在這里我們可以添加“期望”。

Apifox 高級 Mock

一個期望就是指當(dāng)你的請求包含某個參數(shù)值的時候，就返回特定的數(shù)據(jù)。

比如我設(shè)定我的1號寵物是在售的，2號寵物是已售出的，3號寵物是記錄不存在的，DDD 號寵物是“ ID 格式不正確”的。我把這些返回值都設(shè)好。

之后，我發(fā)送的請求參數(shù)是1的時候，就返回一個在售的寵物信息;2返回一個已售的;3返回一個“404 not found”，4返回一個“Invalid Param”。

啊，簡直能模擬出來一個后端服務(wù)器了！

我就是那個 ID 格式不正確的寵物

第六層：高級 Mock 模板語法

你覺得這個 Mock 功能已經(jīng)非常強大了是吧。我最開頭提了張無忌，你知道張無忌的乾坤大挪移總共有幾層嗎？

我們進入高級 Mock 寫期望的時候，鼠標(biāo)放在這個支持 “Mock.js 語法”上會浮出來一段示例。

高級 Mock 的語法示例

這個示例是講什么的呢？我們可以在 Apifox 里面實際運行一下試試。

以上示例的返回結(jié)果

它生成了一個 JSON 格式的數(shù)組！

總共有 20 組 id 和名字，比如你在前端要生成一個填滿數(shù)據(jù)的二維表格，一次就能 Mock 一整套!只需要短短幾行代碼！

我們回來看這個語法示例，正常的 JSON 里面插入了大括號百分號包裹的兩段 “for” 代碼，它就是 JS 模板語法(Nunjucks語法)，可以使用它來生成復(fù)雜的數(shù)據(jù)結(jié)構(gòu)！

不但支持 for 循環(huán)！還支持 if 分支！還支持正則表達(dá)式！還支持調(diào)用函數(shù)！

你說！是不是有我(加上 Apifox)就夠了！還要后端做什么！

第七層：高級 Mock 自定義腳本

還有？？？

這是最新的 Apifox 2.1.7 才有的強大功能。

新版本的高級 Mock 增加了一個“腳本”的 Tab，這個高級 Mock 自定義腳本是做什么用的呢？

高級 Mock 自定義腳本

我們來考慮一個實際的案例。我有一個“查詢寵物列表”的 GET 接口，它的請求參數(shù)是 page 和 pageSize，取值是 6 和 10，含義就是我要查寵物列表的第 6 頁，每頁限定 10 條記錄。這是個很常見的翻頁場景。

我想要的

返回數(shù)據(jù)首先是一個數(shù)組，每一條是我查出來的這一頁的一個寵物。下面還有一個 page 和 total，也就是當(dāng)前頁碼和總計多少條記錄。請求一下，返回的 Mock 數(shù)據(jù)就是一系列的寵物信息。

到下面的 page 字段，出現(xiàn)問題了：我請求的明明請求的是第 6 頁的數(shù)據(jù)，你給我返回 page 是第 10 頁算什么意思。

我得到的

再翻翻頁，新的問題又出現(xiàn)了：剛才還是總共 25 頁呢，我一翻頁就變成總共 40 頁了???而且第 10 頁的下一頁是 22 頁?

翻到下一頁

我希望 Mock 出來的數(shù)據(jù)是什么樣的呢?應(yīng)該是我請求的是第幾頁，返回來的數(shù)據(jù)就是第幾頁;然后總頁數(shù)應(yīng)該是固定的，不會因為我翻前翻后就變。

這時候我們就需要高級 Mock 的自定義腳本了。

在自定義腳本界面的右側(cè)有一段示例代碼，我們仔細(xì)讀一下。

• 通過 fox.mockResponse.json() 獲取系統(tǒng)自動生成的 JSON 數(shù)據(jù)，賦值給變量 responseJson。
• 通過 fox.mockRequest.getParam('page') 獲取實際請求參數(shù) page，賦值給變量 responseJson 里的 page 字段。
• 把 responseJson 的 total 字段重寫為 120。
• 通過 fox.mockResponse.setBody(responseJson) 把修改后的變量 responseJson 設(shè)置到的 mockResponse 里面，這樣就修改了系統(tǒng)返回的 JSON 數(shù)據(jù)。

這樣，我請求的是第幾頁，返回的就也是對應(yīng)的第幾頁，然后總頁數(shù)是保持 12 不變(120 除以每頁 10 個)。

這個自定義腳本就可以做很多事情了，比如我需要根據(jù)用戶的性別是男是女 Mock 出返回的不同頭像;或者先 Mock 出出生日期，然后用出生日期拼裝成對應(yīng)的身份證號等等，可以讓我們 Mock 出來的數(shù)據(jù)彼此吻合。

自定義腳本可以操作的對象就是這個 fox.mockRequest 和 fox.mockResponse，可以獲取請求參數(shù)、Header、Cookie，修改響應(yīng) Body、HTTP 狀態(tài)碼等，甚至響應(yīng)的延時都可以自定義。

你就說牛不牛吧!

趕緊去下載吧

Apifox Mock 功能的七層天梯，打完收功。

如果你是個前端，并且讀到了這里，我覺得你應(yīng)該鼓一下掌。

Apifox 的 Mock 功能完全值得你去下載。其他的 API 和 Mock 工具你全都可以扔掉了。

記得要下載Apifox桌面版使用，WEB 版目前還不支持 Mock 功能。

最后提醒一下，Mock 只是 Apifox 的功能中的一小部分。Apifox = Postman + Swagger + Mock + Jmeter，它的功能遠(yuǎn)不止這篇文章里的這些。

大家也可以前往官方網(wǎng)站了解詳情。

官方網(wǎng)站：https://www.apifox.cn/?utm_source=nodejs