前端福音：我見過的最強(qiáng) Mock 工具，沒有之一！
前端的痛苦
作為前端，最痛苦的是什么時候？
每個迭代，需求文檔跟設(shè)計稿都出來了，靜態(tài)頁面唰唰兩天就做完了。可是做前端又不是簡單地把后端吐出來的數(shù)據(jù)放到頁面上就完了，還有各種前端處理邏輯啊。
后端接口還沒出來，我就得邊寫代碼邊測前端效果，又沒有真實數(shù)據(jù)。有人建議用 Mock 工具，可是每個接口都要自己寫 Mock 規(guī)則，這得浪費多少時間呀。
等到后端好不容易把接口寫出來了，一對接聯(lián)調(diào)，好多字段的數(shù)據(jù)又跟我 Mock 的數(shù)據(jù)對不上，又得重新改代碼。
每個迭代都是一場折磨。
就是那種，明明知道這個地方整個團(tuán)隊都可以更有效率，但偏偏就是做不到的無力感。
黎明的希望
直到有一天，我遇到這個神器。我的效率提升了 100%。
我可以用最省力最優(yōu)雅的方式得到我需要的 Mock 數(shù)據(jù)，甚至不需要任何配置。而且，聯(lián)調(diào)時候曾經(jīng)遇到的各種令人崩潰的前后端數(shù)據(jù)對接問題，統(tǒng)統(tǒng)不！見！了！
就是這個??
我研究了整整一周，越研究越是心驚。這個工具太強(qiáng)大，完全超出我的預(yù)期，就如《倚天屠龍記》里張無忌修煉的乾坤大挪移，練完一層，上面還有一層，每一層都是一片全新的天地。
我曾經(jīng)以為，定接口什么的你們后端定就行了，跟我前端有什么關(guān)系。定好了吐數(shù)據(jù)給我就行了。
我曾經(jīng)以為，寫接口文檔什么的完全是浪費時間，邊寫代碼邊改接口不好嘛。
直到我遇到這個神器，我才明白好的工作習(xí)慣能給我提升多少效率。
現(xiàn)在的我已經(jīng)不一樣了。我認(rèn)為這款神器能夠把全中國前端程序員的工作效率都提升一倍。我也希望在讀這篇文章的你，能夠好好把這款工具用起來。
以下還有 3000 字，閱讀時長 5～10 分鐘。如果你嫌讀文字太麻煩，這里也有個視頻，內(nèi)容是一樣的。
好，接下來我要發(fā)功了。
第一層：智能 Mock
Apifox 是個 API 協(xié)作工具，用它來做 Mock 數(shù)據(jù)的基礎(chǔ)也是 API 文檔。在 Apifox 里維護(hù)的 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 地址，用瀏覽器打開看下效果。
就是這么簡單！就是這么方便！
什么！都不需要！配置！
其實我們遇到的大部分 API 返回數(shù)據(jù)都是通用的，用戶名、手機(jī)號、地址、郵箱、時間戳，等等等等。但是你要去寫 Mock 規(guī)則就很麻煩。你要怎么生成一個看起來合理的中國人名？
在 Apifox 里面，這變成了最簡單的事情，甚至是完全無感的。只要寫 API 文檔的時候把返回的數(shù)據(jù)結(jié)構(gòu)定義好，這個事情就完成了。Apifox 會根據(jù)字段名稱智能生成 Mock 數(shù)據(jù)，不需要任何配置。
如接口返回的數(shù)據(jù)結(jié)構(gòu)里某個字段名稱叫username就會得到“程敏”“王寧”“安慕希”“李瑪璧”。
字段名稱叫phone，就會得到15237829132、18907284633。
字段名稱叫city，就會得到杭州市、高雄市、博爾塔拉蒙古自治州。
甚至如果你的字段名稱叫icon，就會返回一個圖片 URL，打開就真的是一張 png 圖片！
如果你們團(tuán)隊使用的是 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ī)則生成隨機(jī)值（Mock.js 語法規(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è)置長度范圍、正則規(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ī)則了。
在 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 得出來。
而且 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)簽頁。在這里我們可以添加“期望”。
一個期望就是指當(dāng)你的請求包含某個參數(shù)值的時候，就返回特定的數(shù)據(jù)。
比如我設(shè)定我的1號寵物是在售的，2號寵物是已售出的，3號寵物是記錄不存在的，DDD 號寵物是“ ID 格式不正確”的。我把這些返回值都設(shè)好。
之后，我發(fā)送的請求參數(shù)是1的時候，就返回一個在售的寵物信息；2返回一個已售的；3返回一個“404 not found”，4返回一個“Invalid Param”。
啊，簡直能模擬出來一個后端服務(wù)器了！
第六層：高級 Mock 模板語法
你覺得這個 Mock 功能已經(jīng)非常強(qiáng)大了是吧。我最開頭提了張無忌，你知道張無忌的乾坤大挪移總共有幾層嗎？
我們進(jìn)入高級 Mock 寫期望的時候，鼠標(biāo)放在這個支持 “Mock.js 語法”上會浮出來一段示例。
這個示例是講什么的呢？我們可以在 Apifox 里面實際運行一下試試。
它生成了一個 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 才有的強(qiáng)大功能。
新版本的高級 Mock 增加了一個“腳本”的 Tab，這個高級 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)不止這篇文章里的這些。
