背景
在開發(fā)過程中，由于后端與前端并行開發(fā)较鼓，或者前端需要等待后臺開發(fā)，難以保證對接效率鲤看，同時即使用開發(fā)好的 API 對接，也有可能一個 API 不通就阻塞了整個軟件的對接工作耍群。同時對軟件的敏感度也很高义桂，一不小心就可能導(dǎo)致整個軟件不能正常工作。并且界面之間存在著嚴(yán)重的相互依賴關(guān)系蹈垢，產(chǎn)生的業(yè)務(wù)邏輯非常復(fù)雜慷吊，這些都會對軟件的開發(fā)效率產(chǎn)生很大的影響。
所以學(xué)習(xí)如何利用最好的 Mock 數(shù)據(jù)是很關(guān)鍵的曹抬。這樣做會降低前端開發(fā)者的工作量溉瓶，降低開發(fā)費(fèi)用，提高開發(fā)效率谤民。
以下是一些常見的 Mock 方法堰酿，我們可以根據(jù)具體的場景<u>和</u>條件來進(jìn)行選擇和配置。最關(guān)鍵的是要知道如何去做张足，并從中挑選出最適合自己的方式触创。
Mock 介紹
或許還有一些沒見過 Mock 的讀者，不知道 Mock 是什么为牍。今天就來跟你說說這玩意的厲害哼绑，這玩意非同凡響岩馍！
簡單地說， Mock 是指在測試期間抖韩，為一些難以構(gòu)建或不易獲得的對象蛀恩，創(chuàng)建一個虛擬物體進(jìn)行測試。而這個虛擬物體就是模擬物體茂浮，模擬對象是在調(diào)試過程中實(shí)際對象的替代赦肋。
有時候， Mock 服務(wù)被稱為一個測試服務(wù)替代品励稳，或一個測試服務(wù)佃乘，下面的圖片非常生動地說明了它的功能。
Mock 能解決什么問題?
Mock 功能的優(yōu)勢：
前端對接不依賴后端： 讓前端工程師獨(dú)立于后端進(jìn)行開發(fā)驹尼。
增加測試的真實(shí)性： 通過隨機(jī)數(shù)據(jù)趣避，模擬各種場景。
開發(fā)無侵入： 不需要修改既有代碼新翎，就可以攔截 Ajax 請求程帕，返回模擬的響應(yīng)數(shù)據(jù)。
數(shù)據(jù)類型豐富： 支持生成隨機(jī)的文本地啰、數(shù)字愁拭、布爾值、日期亏吝、郵箱岭埠、鏈接、圖片蔚鸥、顏色等惜论。
方便擴(kuò)展： 支持?jǐn)U展更多數(shù)據(jù)類型，支持自定義函數(shù)和正則止喷。
Mock 功能適用場景在實(shí)際工作中非常多馆类，真正在實(shí)際項(xiàng)目中，引入Mock 工具通常來解決如下幾類問題弹谁。
主要有：
- 開發(fā)進(jìn)行單元測試
因?yàn)閱卧獪y試只對目前的單元進(jìn)行乾巧，所以必須保證所有的內(nèi)外依賴關(guān)系都是穩(wěn)定的，使用 mock 的方式來模擬基礎(chǔ)單元依賴的其它單元预愤，這樣就可以把測試的重心放在當(dāng)前單元的功能上沟于，從而消除外部因素的影響，提高測試的準(zhǔn)確性鳖粟。
- 調(diào)用第三方接口
在做接口自動化的時候社裆，有時候需要調(diào)用第三方的接口，但是別人公司的接口服務(wù)穩(wěn)定性不受你的控制向图，有可能別人提供的測試環(huán)境今天服務(wù)給你開著泳秀，別人就關(guān)掉了标沪，給自動化接口測試帶來很多的麻煩，此時就可以通過 mock 來模擬接口的返回數(shù)據(jù)嗜傅，比如模擬各種第三方異常時的返回金句。
- 解決接口間的相互依賴
例如，您正在開發(fā)前端網(wǎng)頁吕嘀，現(xiàn)在您需要開發(fā)付款功能：下一次訂購违寞、付款頁面界面、付款結(jié)果偶房、付款成功趁曼、顯示付款成功頁、付款失敗頁棕洋。為了實(shí)現(xiàn)這個特性挡闰，您必須調(diào)用后臺界面，并顯示出相應(yīng)的頁面￡蹋現(xiàn)在的后端界面還沒有完全開發(fā)出來摄悯，如果是前端開發(fā)，那就只能加班了愧捕。要實(shí)現(xiàn)開發(fā)工作的同步奢驯，在這個時候，您可以按照接口文件的要求次绘，將接口的地址和參數(shù)發(fā)送給用戶瘪阁，再通過 mock 接口的不同的返回接口，來完成開發(fā)工作断盛。
傳統(tǒng) Mock 解決方案
傳統(tǒng) Mock 解決方案常見的有兩種罗洗，一種是使用 Postman 接口測試工具進(jìn)行 Mock 數(shù)據(jù)，另外一種是使用 Mock js 第三方庫進(jìn)行 Mock 數(shù)據(jù)钢猛。
Postman接口測試工具
Postman 中需要點(diǎn)擊 Create Mock Server 配置 mock 服務(wù)。選擇之后轩缤，應(yīng)用程序會進(jìn)行一步一步的提示命迈。
配置需要 mock 的接口地址，手動輸入響應(yīng)數(shù)據(jù)返回值即可火的。
Mock js第三方庫
Mock.js 是一款模擬數(shù)據(jù)生成器壶愤，旨在幫助前端攻城師獨(dú)立于后端進(jìn)行開發(fā)，幫助編寫單元測試馏鹤。提供了以下模擬功能：
根據(jù)數(shù)據(jù)模板生成模擬數(shù)據(jù)
模擬 Ajax 請求征椒，生成并返回模擬數(shù)據(jù)
基于 HTML 模板生成模擬數(shù)據(jù)
在 Mac 上打開命令行終端，輸入安裝命令： npm install mockjs湃累，稍等幾分鐘安裝完成勃救。
簡單示例展示：
Mock list 是自增數(shù)據(jù)
// 使用 Mock
var Mock = require('mockjs')
var data = Mock.mock({
// 屬性 list 的值是一個數(shù)組碍讨，其中含有 1 到 10 個元素
'list|1-10': [{
// 屬性 id 是一個自增數(shù)，起始值為 1蒙秒，每次增 1
'id|+1': 1
}]
})
// 輸出結(jié)果
console.log(JSON.stringify(data, null, 4))
Mock 按規(guī)則生成字符串
// 指定范圍的數(shù)量
Mock.mock({ "string|1-10": "★" }) // 執(zhí)行后
{ "string": "★★" } // 隨機(jī)生成數(shù)量為1-10個'*'字符串
// 固定數(shù)量
Mock.mock({ "string|3": "*" }) // 執(zhí)行后
{ "string": "***" } // 生成指定數(shù)量的'*'（示例是3個）字符串
Postman 和 Mock js 使用小結(jié)
Postman： Postman 的安裝更容易勃黍，但 Postman 在 mock 功能中的表現(xiàn)，必須手工填寫 mock 數(shù)據(jù)晕讲，而且只有一個配置可以寫入覆获。在實(shí)際應(yīng)用中，仍然不夠靈活瓢省，擴(kuò)展性不強(qiáng)弄息。
Mock js：Mock js 雖然能 mock 出很多類型的數(shù)據(jù)，但是它需要嵌入在前端 vue 項(xiàng)目中結(jié)合使用勤婚，上手使用有一定的門檻疑枯。
總的來看，傳統(tǒng) Mock 解決方案存在幾類問題:
適配復(fù)雜場景的 Mock 能力弱蛔六；
復(fù)雜依賴環(huán)境不穩(wěn)定荆永；
會增加代碼量，在寫 mock 對象代碼時国章，有可能引入錯誤具钥；
學(xué)習(xí)成本較高，需要編寫代碼液兽；
綜上問題骂删，我們需要一套開箱即用的 Mock 工具，能應(yīng)對復(fù)雜的業(yè)務(wù)場景四啰、穩(wěn)定并且可靠宁玫、對代碼無侵入、上手使用簡單柑晒。
Eolink 解決方案
在介紹 Eolink 解決方案之前欧瘪，介紹下 Eolink 到底是個啥? 能解決什么問題?讓我們先來了解一下。
官方的解釋: Eolink 能夠提供 API 全生命周期管理解決方案匙赞，幫助前端佛掖、后端以及測試人員的工作變得更敏捷，包含功能: 接口文檔管理涌庭、接口自動化測試芥被、接口數(shù)據(jù) Mock 等功能。
這意味著 Eolink 將會為我們帶來一種全新的技術(shù)解決方案, 接下來給大家介紹強(qiáng)大的 mock 功能使用坐榆。
Eolink 的 mock 功能非常完善拴魄，從一個整體 Mock 到一個字段級的 Mock 都可以適應(yīng)不同的情況。我肯定相信大部分人會將其用于每天的應(yīng)用，例如前后端項(xiàng)目開發(fā)匹中，第三方接口的調(diào)試夏漱，以及接口的自動化測試，幾個小時就能熟練地運(yùn)用职员。
我將其功能拆解成思維導(dǎo)圖的方式講解麻蹋，這樣會更清晰易懂。
從以上的思維導(dǎo)圖可以分為六個層次的 Mock 功能焊切，下面我將通過每個 Mock 的業(yè)務(wù)上的實(shí)例來說明功能的特點(diǎn)扮授，具體的 Mock 的用法，還有一些具體的調(diào)試和優(yōu)化专肪。
全局 Mock
特點(diǎn)： 提供系統(tǒng)兜底的 Mock 規(guī)則刹勃，確保每個 Mock 調(diào)用的返回參數(shù)均有隨機(jī)數(shù)據(jù)。
全局 Mock 是 Eolink 提供的最兜底或者最保守的一種 Mock 功能嚎尤，主要是為了方便那些不想要附加 Mock 的同學(xué)荔仁，提供一些簡單的 Mock 功能。
首先芽死，需要編輯頁面的返回結(jié)果設(shè)置city字段乏梁。
然后在文檔底部Mock模塊選擇系統(tǒng)默認(rèn)期望鏈接并且點(diǎn)擊復(fù)制到瀏覽器中。
每次刷新瀏覽器关贵，都會 name 字段都會返回隨機(jī)字符串遇骑，達(dá)到了每個 Mock 調(diào)用的返回參數(shù)均有隨機(jī)數(shù)據(jù)的效果。
高級 Mock
特點(diǎn)：配置不同的請求參數(shù)揖曾，以獲得不同的返回數(shù)據(jù)落萎。靈活全面的自定義配置，一個接口實(shí)現(xiàn)多種返回數(shù)據(jù)炭剪。
比如請求參數(shù)的類型 name 字段參數(shù)值是1练链、2、3奴拦，但是需要返回的結(jié)果返回不同的響應(yīng)結(jié)果媒鼓。在實(shí)際項(xiàng)目中，為了降低前端配置 Mock 接口粱坤，可以通過一個接口實(shí)現(xiàn)配置不同的請求參數(shù)隶糕，獲取不同的返回數(shù)據(jù)。
可是使用動態(tài) Javascript 通過代碼生成返回數(shù)據(jù)時站玄，JavaScript是一種支持面向?qū)ο缶幊獭⒚钍骄幊毯秃瘮?shù)式編程的網(wǎng)頁開發(fā)客戶端腳本語言濒旦，可以使用編寫 Javascript 代碼的方式株旷，并使用 return 語句返回數(shù)據(jù)，而且這種方式最容易處理數(shù)據(jù)，本文中使用的就是這種方式晾剖。Javascript模式中也支持 Mock JS锉矢，通過 Mock.mock() 方式調(diào)用，詳情可以查閱 Mock JS 官方文檔齿尽。
通過編寫 Javascript 腳本設(shè)置響應(yīng)內(nèi)容，還可以直接使用內(nèi)置函數(shù)設(shè)置“請求體觸發(fā)條件”相關(guān)內(nèi)容， 設(shè)置的信息等同于在“請求體觸發(fā)條件”輸入框中的設(shè)置史隆，如設(shè)置 Header 參數(shù)或者請求體參數(shù)等爆捞， 設(shè)置完成后，在測試時填寫對應(yīng)的參數(shù)進(jìn)行觸發(fā)卡骂。
示例：設(shè)置請求體參數(shù)国裳，對觸發(fā)條件進(jìn)行判斷輸出符合條件的數(shù)值 判斷觸發(fā)條件“a”是否等于“eo_test”若等于則輸出“成功”，否則輸出“失敗”全跨。
在請求參數(shù)中輸入status=1 后缝左，可以看出結(jié)果是 code=1，這樣就是根據(jù)輸入條件動態(tài) mock 返回數(shù)據(jù)的效果浓若。當(dāng)然渺杉，在“數(shù)據(jù)輸出”中，我們可以添加代碼挪钓，對數(shù)據(jù)的合理性進(jìn)行檢查是越，以確保數(shù)據(jù)的合理可信。
返回結(jié)果 Mock
特點(diǎn)：編輯接口文檔的返回結(jié)果的同時完成 Mock 規(guī)則配置诵原。邊寫文檔邊完成 Mock 配置英妓，無需額外工作量。
在 Mock 規(guī)則區(qū)域绍赛，可直接在 Mock 規(guī)則輸入框中填寫固定值蔓纠，Mock API 調(diào)用時直接返回其固定值。
智能內(nèi)置 Mock
特點(diǎn)：智能識別常用返回參數(shù)吗蚌，自動填入預(yù)置 Mock規(guī) 則腿倚。零配置，無形中完成 Mock 規(guī)則填寫蚯妇。
系統(tǒng)已內(nèi)置一套常用的智能 Mock 規(guī)則敷燎，你無需做任何配置，在文檔中編寫對應(yīng)的字段名則會出現(xiàn)對應(yīng)的 Mock 規(guī)則箩言。實(shí)現(xiàn) Mock API 零配置硬贯，無形中完成 Mock 規(guī)則填寫。
比如: 字段名輸入 time陨收，Mock 規(guī)則會自動識別匹配出內(nèi)置 Mock 規(guī)則饭豹，@datetime('yyyy-MM-dd HH:mm:ss') 這種 Mock 規(guī)則鸵赖，用戶在使用過程中，使用效果無感知拄衰、不需要額外配置它褪。
智能自定義 Mock
特點(diǎn)：智能識別特殊返回參數(shù)，自動化填充自定義 Mock 規(guī)則翘悉。一次配置多次復(fù)用茫打，提升 Mock 規(guī)則邊寫效率。
你可以通過智能自定義 Mock 配置妖混，使得你在文檔中編寫某個字段名后老赤，系統(tǒng)自動填入對應(yīng)的 Mock 規(guī)則。實(shí)現(xiàn)字段 Mock 規(guī)則一次配置源葫，永久復(fù)用诗越。大大提高了工作效率，讓您在工作中游刃有余息堂。
把 Mock 規(guī)則和字段名的匹配規(guī)則預(yù)先自定義好嚷狞，然后后續(xù)可以在實(shí)際使用的時候，填寫對應(yīng)的字段名可以輸出對應(yīng)的 Mock 規(guī)則荣堰。
比如：
@ctitle: 隨機(jī)生成一句中文標(biāo)題床未。
@cword: 隨機(jī)中文詞組。
@datetime: 日期時間振坚。
約束條件 Mock
特點(diǎn)：根據(jù)字段約束條件自動生成對應(yīng)的 Mock 數(shù)據(jù)薇搁。字段級多條件配置，還原最真實(shí)的隨機(jī)數(shù)據(jù)渡八。
對返回參數(shù)字段進(jìn)行約束條件設(shè)置后啃洋，Mock 規(guī)則輸入框會自動填入占位符 @eo.limit 并自動根據(jù)約束條件返回 Mock 數(shù)據(jù)。
在操作區(qū)域內(nèi)點(diǎn)擊更多設(shè)置屎鳍，如字段長度宏娄，最大值最小值，和值可能性等逮壁。
Eolink 的 Mock 解決方案的優(yōu)勢:
能適配各種場景的 Mock 能力強(qiáng)孵坚；
學(xué)習(xí)成本低，不需要額外編寫代碼窥淆；
mock 能力更加智能卖宠，實(shí)現(xiàn)零配置；
mock 服務(wù)和應(yīng)用服務(wù)彼此分離忧饭，不會存在代碼污染扛伍。
結(jié)語
Eolink 在 Mock 方面表現(xiàn)的很強(qiáng)大，適用于不同的業(yè)務(wù)場景词裤、適用于不同的使用人群蜒秤，通過以上兩種簡單和高級的調(diào)用汁咏，不同之處是簡單的 Mock 配置簡單亚斋，而高級 Mock 是基于簡單 Mock 的增強(qiáng)作媚，可以適應(yīng)更加復(fù)雜的情況，結(jié)合多種智能配置方式搭建的 Mock API 能力體系帅刊，滿足了大部分用戶對 Mock 能力的需求纸泡。
