前端福音：我見過的最強 Mock 工具，沒有之一！
前端的痛苦
作為前端，最痛苦的是什么時候？
每個迭代，需求文檔跟設計稿都出來了，靜態(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)不！見！了！
就是這個??
我研究了整整一周，越研究越是心驚。這個工具太強大，完全超出我的預期，就如《倚天屠龍記》里張無忌修煉的乾坤大挪移，練完一層，上面還有一層，每一層都是一片全新的天地。
我曾經(jīng)以為，定接口什么的你們后端定就行了，跟我前端有什么關系。定好了吐數(shù)據(jù)給我就行了。
我曾經(jīng)以為，寫接口文檔什么的完全是浪費時間，邊寫代碼邊改接口不好嘛。
直到我遇到這個神器，我才明白好的工作習慣能給我提升多少效率。
現(xiàn)在的我已經(jīng)不一樣了。我認為這款神器能夠把全中國前端程序員的工作效率都提升一倍。我也希望在讀這篇文章的你，能夠好好把這款工具用起來。
以下還有 3000 字，閱讀時長 5～10 分鐘。如果你嫌讀文字太麻煩，這里也有個視頻，內(nèi)容是一樣的。
好，接下來我要發(fā)功了。
第一層：智能 Mock
Apifox 是個 API 協(xié)作工具，用它來做 Mock 數(shù)據(jù)的基礎也是 API 文檔。在 Apifox 里維護的 API 可以生成好看的在線接口文檔，也可以像 Postman 那樣一鍵調(diào)試，像 JMeter 那樣做測試，還可以直接 Mock 數(shù)據(jù)。不過今天我們只聊?Mock。
首先，你需要在 Apifox 里面創(chuàng)建一個接口，定義好請求參數(shù)和返回數(shù)據(jù)結構。
好了，保存。完成！
……………………
等會兒？Mock 呢？怎么就完成了？Mock 規(guī)則在哪兒寫？
真的就完成了。
Apifox 會自動啟動一個本地的 Mock 服務，我復制一下 Apifox 自動生成的 Mock 地址，用瀏覽器打開看下效果。
就是這么簡單！就是這么方便！
什么！都不需要！配置！
其實我們遇到的大部分 API 返回數(shù)據(jù)都是通用的，用戶名、手機號、地址、郵箱、時間戳，等等等等。但是你要去寫 Mock 規(guī)則就很麻煩。你要怎么生成一個看起來合理的中國人名？
在 Apifox 里面，這變成了最簡單的事情，甚至是完全無感的。只要寫 API 文檔的時候把返回的數(shù)據(jù)結構定義好，這個事情就完成了。Apifox 會根據(jù)字段名稱智能生成 Mock 數(shù)據(jù)，不需要任何配置。
如接口返回的數(shù)據(jù)結構里某個字段名稱叫username就會得到“程敏”“王寧”“安慕希”“李瑪璧”。
字段名稱叫phone，就會得到15237829132、18907284633。
字段名稱叫city，就會得到杭州市、高雄市、博爾塔拉蒙古自治州。
甚至如果你的字段名稱叫icon，就會返回一個圖片 URL，打開就真的是一張 png 圖片！
如果你們團隊使用的是 Swagger 等其他工具管理 API 文檔，也可以導入到 Apifox（Apifox 支持 20 多種格式數(shù)據(jù)導入，還可以設置定時自動導入），一樣可以使用這個智能 Mock，一樣是零配置自動生成所有 Mock 數(shù)據(jù)。
完全不用操心任何 Mock 數(shù)據(jù)配置的問題，只要接口定好了，Mock 數(shù)據(jù)就有了，我什么前端代碼都能寫。
第二層：自定義智能 Mock 規(guī)則
有的同學問，你這個都是預設死的吧？我怎么知道寫什么參數(shù)名稱你會給我 Mock 出什么數(shù)據(jù)來？好，這就是 Apifox Mock 功能的第二層：自定義智能 Mock 規(guī)則。
在 Apifox 里面內(nèi)置了一整套 Mock 規(guī)則，當我們的返回字段名匹配上了其中的某條規(guī)則，就會根據(jù)對應規(guī)則生成隨機值（Mock.js 語法規(guī)則）。
字段名稱的匹配方式支持通配符和正則表達式，比如字段只要以 “url” 結尾，就會得到一個正確的網(wǎng)址；以 “mail” 打頭，就會得到一個郵箱地址。
要是以 “time” 結尾，那還會自動根據(jù)字段的數(shù)據(jù)類型來 Mock 值：string 類型的話就返回一個 'yyyy-mm-dd hh:mm:ss' 格式時間；integer 類型的話就返回一個時間戳。是不是很智能？！
有內(nèi)置規(guī)則，當然就可以自定義新規(guī)則。
比如我們公司的訂單 id 是以 “DD” 打頭的十位數(shù)字，我就可以新建一個 string 類型的規(guī)則，匹配規(guī)則寫 “*orderid” ， mock 規(guī)則寫一個正則表達式：@regexp(/DD\d{10}/)。這樣，只要我任何一個接口返回字段是以 “orderid” 結尾，都會得到一個 “DD1284918414” 這樣的返回值。
第三層：返回字段高級設置
有的同學說，你這個是比較通用的數(shù)據(jù)類型，可我還有很多沒那么通用的類型，比如寵物店上架的寵物，有三種狀態(tài)：可售、已售、待上架，要怎么 Mock 出來？
在 Apifox 里面，定義接口返回數(shù)據(jù)結構的時候每個字段都有一個“高級設置”的概念。比如我寵物的上架狀態(tài)還可以定義為枚舉，枚舉可選值為（“available”，“sold”，“pending”）。如果接口這樣定義了，那么 Mock 就會自動從這三個字符串里取值。
這個字段高級設置里不止有枚舉，還可以設置長度范圍、正則規(guī)則等。如果字段類型是數(shù)字，還可以設置最大值最小值等。
如果你對 JSON Schema 比較熟的話，也可以直接寫 Schema，那可定義空間就更大了。
而且我們要注意：這個時候我們設的其實不是 Mock 規(guī)則，而是接口返回值的數(shù)據(jù)結構定義，這個是會對接口調(diào)試的自動校驗功能生效的，如果后端接口返回的數(shù)據(jù)不符合這里的設置，Apifox 會返回一個“數(shù)據(jù)結構校驗失敗”，就告訴后端你接口返回數(shù)據(jù)結構不對。
而我們的 Mock 數(shù)據(jù)也是根據(jù)這里的設置自動生成，不需要任何額外配置。
爽不爽，可以直接甩一張截圖去懟后端了。
第四層：接口級自定義 Mock
有的同學說，那我還有一種場景，比如我這個用戶名字段，數(shù)據(jù)定義里其實是允許他輸入任意字符串的，可是我 Mock 是需要一個真實姓名的，不能靠字段定義啊。
而且，你剛才演示的都是中國人名，我的客戶都是歐美人怎么辦。
啊，終于要針對特定接口設置一點點規(guī)則了。
在 Apifox 里，給接口定義數(shù)據(jù)結構的時候是可以給每個字段設置 Mock 規(guī)則的，而且直接就可以選一系列的常用 Mock 規(guī)則，常見的各種數(shù)據(jù)類型其實都齊全了。比如我需要一個外文人名，我就可以在這里寫 @name，運行一下就會得到 “Larry Smith” “Susan Lee” 這樣的英文名。
如果前面說的智能 Mock 滿足不了你，在這里設置規(guī)則就可以覆蓋掉內(nèi)置規(guī)則。這里支持 Mock.js 和正則表達式，只要你能想到的規(guī)則，全都 Mock 得出來。
而且 Apifox 支持?數(shù)據(jù)模型（Schema）?定義，不同的接口可以復用相同的數(shù)據(jù)模型，模型里定義的規(guī)則在所有引用它的接口里都會生效，不需要任何額外的配置。
一次 Mock，終身享受。
第五層：高級 Mock
還有那么一些同學，他們說，希望能讓我自己定義：根據(jù)不同的參數(shù)值，返回不同的數(shù)據(jù)。
比如我請求的參數(shù)寵物ID?為?1?就返回一個在售的寵物數(shù)據(jù)，如果寵物ID?為?2?就返回一個已售的寵物數(shù)據(jù)。我前端可以把幾種狀態(tài)的頁面都做出來。
好吧，Apifox mock 的第五層就是為你準備的。
在 Apifox 的“接口管理” 有一個 “高級 Mock” 標簽頁。在這里我們可以添加“期望”。
一個期望就是指當你的請求包含某個參數(shù)值的時候，就返回特定的數(shù)據(jù)。
比如我設定我的1號寵物是在售的，2號寵物是已售出的，3號寵物是記錄不存在的，DDD 號寵物是“ ID 格式不正確”的。我把這些返回值都設好。
之后，我發(fā)送的請求參數(shù)是1的時候，就返回一個在售的寵物信息；2返回一個已售的；3返回一個“404 not found”，4返回一個“Invalid Param”。
啊，簡直能模擬出來一個后端服務器了！
第六層：高級 Mock 模板語法
你覺得這個 Mock 功能已經(jīng)非常強大了是吧。我最開頭提了張無忌，你知道張無忌的乾坤大挪移總共有幾層嗎？
我們進入高級 Mock 寫期望的時候，鼠標放在這個支持 “Mock.js 語法”上會浮出來一段示例。
這個示例是講什么的呢？我們可以在 Apifox 里面實際運行一下試試。
它生成了一個 JSON 格式的數(shù)組！
總共有 20 組 id 和名字，比如你在前端要生成一個填滿數(shù)據(jù)的二維表格，一次就能 Mock 一整套！只需要短短幾行代碼！
我們回來看這個語法示例，正常的 JSON 里面插入了大括號百分號包裹的兩段 “for” 代碼，它就是 JS 模板語法（Nunjucks語法），可以使用它來生成復雜的數(shù)據(jù)結構！
不但支持 for 循環(huán)！還支持 if 分支！還支持正則表達式！還支持調(diào)用函數(shù)！
你說！是不是有我（加上 Apifox）就夠了！還要后端做什么！
第七層：高級 Mock 自定義腳本
還有？？？
這是最新的 Apifox 2.1.7 才有的強大功能。
新版本的高級 Mock 增加了一個“腳本”的 Tab，這個高級 Mock 自定義腳本是做什么用的呢？
我們來考慮一個實際的案例。我有一個“查詢寵物列表”的 GET 接口，它的請求參數(shù)是 page 和 pageSize，取值是 6 和 10，含義就是我要查寵物列表的第 6 頁，每頁限定 10 條記錄。這是個很常見的翻頁場景。
返回數(shù)據(jù)首先是一個數(shù)組，每一條是我查出來的這一頁的一個寵物。下面還有一個 page 和 total，也就是當前頁碼和總計多少條記錄。請求一下，返回的 Mock 數(shù)據(jù)就是一系列的寵物信息。
到下面的 page 字段，出現(xiàn)問題了：我請求的明明請求的是第 6 頁的數(shù)據(jù)，你給我返回 page 是第 10 頁算什么意思。
再翻翻頁，新的問題又出現(xiàn)了：剛才還是總共 25 頁呢，我一翻頁就變成總共 40 頁了？？？而且第 10 頁的下一頁是 22 頁？
我希望 Mock 出來的數(shù)據(jù)是什么樣的呢？應該是我請求的是第幾頁，返回來的數(shù)據(jù)就是第幾頁；然后總頁數(shù)應該是固定的，不會因為我翻前翻后就變。
這時候我們就需要高級 Mock 的自定義腳本了。
在自定義腳本界面的右側有一段示例代碼，我們仔細讀一下。
通過?
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 設置到的 mockResponse 里面，這樣就修改了系統(tǒng)返回的 JSON 數(shù)據(jù)。
這樣，我請求的是第幾頁，返回的就也是對應的第幾頁，然后總頁數(shù)是保持 12 不變（120 除以每頁 10 個）。
這個自定義腳本就可以做很多事情了，比如我需要根據(jù)用戶的性別是男是女 Mock 出返回的不同頭像；或者先 Mock 出出生日期，然后用出生日期拼裝成對應的身份證號等等，可以讓我們 Mock 出來的數(shù)據(jù)彼此吻合。
自定義腳本可以操作的對象就是這個?fox.mockRequest?和?fox.mockResponse，可以獲取請求參數(shù)、Header、Cookie，修改響應 Body、HTTP 狀態(tài)碼等，甚至響應的延時都可以自定義。
你就說牛不牛吧！
趕緊去下載吧
Apifox Mock 功能的七層天梯，打完收功。
如果你是個前端，并且讀到了這里，我覺得你應該鼓一下掌。
Apifox 的 Mock 功能完全值得你點一下閱讀原文然后去下載。其他的 API 和 Mock 工具你全都可以扔掉了。
記得要下載Apifox桌面版使用，WEB 版目前還不支持 Mock 功能。
最后提醒一下，Mock 只是 Apifox 的功能中的一小部分。Apifox = Postman + Swagger + Mock + Jmeter，它的功能遠不止這篇文章里的這些。
