前端的痛苦

作為前端，最痛苦的是什么時(shí)候？

每個(gè)迭代，需求文檔跟設(shè)計(jì)稿都出來(lái)了，靜態(tài)頁(yè)面唰唰兩天就做完了?？墒亲銮岸擞植皇呛?jiǎn)單地把后端吐出來(lái)的數(shù)據(jù)放到頁(yè)面上就完了，還有各種前端處理邏輯啊。

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

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

每個(gè)迭代都是一場(chǎng)折磨。

就是那種，明明知道這個(gè)地方整個(gè)團(tuán)隊(duì)都可以更有效率，但偏偏就是做不到的無(wú)力感。

黎明的希望

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

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

就是這個(gè)：

Apifox

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

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

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

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

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

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

第一層：智能 Mock

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

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

好了，保存。完成！

……………………

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

真的就完成了。

Apifox 會(huì)自動(dòng)啟動(dòng)一個(gè)本地的 Mock 服務(wù)，我復(fù)制一下 Apifox 自動(dòng)生成的 Mock 地址，用瀏覽器打開(kāi)看下效果。

Apifox 本地 Mock 服務(wù)

就是這么簡(jiǎn)單!就是這么方便！

什么！都不需要！配置！

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

懟后端專用圖

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

第四層：接口級(jí)自定義 Mock

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

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

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

可選的 Mock 規(guī)則

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

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

Mock 規(guī)則參考

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

一次 Mock，終身享受。

第五層：高級(jí) Mock

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

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

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

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

Apifox 高級(jí) Mock

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

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

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

啊，簡(jiǎn)直能模擬出來(lái)一個(gè)后端服務(wù)器了！

我就是那個(gè) ID 格式不正確的寵物

第六層：高級(jí) Mock 模板語(yǔ)法

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

我們進(jìn)入高級(jí) Mock 寫(xiě)期望的時(shí)候，鼠標(biāo)放在這個(gè)支持 “Mock.js 語(yǔ)法”上會(huì)浮出來(lái)一段示例。

高級(jí) Mock 的語(yǔ)法示例

這個(gè)示例是講什么的呢？我們可以在 Apifox 里面實(shí)際運(yùn)行一下試試。

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

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

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

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

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

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

第七層：高級(jí) Mock 自定義腳本

還有？？？

這是最新的 Apifox 2.1.7 才有的強(qiáng)大功能。

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

高級(jí) Mock 自定義腳本

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

我想要的

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

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

我得到的

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

翻到下一頁(yè)

我希望 Mock 出來(lái)的數(shù)據(jù)是什么樣的呢?應(yīng)該是我請(qǐng)求的是第幾頁(yè)，返回來(lái)的數(shù)據(jù)就是第幾頁(yè);然后總頁(yè)數(shù)應(yīng)該是固定的，不會(huì)因?yàn)槲曳胺缶妥儭?/p>

這時(shí)候我們就需要高級(jí) Mock 的自定義腳本了。

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

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

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

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

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

你就說(shuō)牛不牛吧!

趕緊去下載吧

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

如果你是個(gè)前端，并且讀到了這里，我覺(jué)得你應(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