這么好的 Mock 工具怎么還不用起來(lái)？
工具好不好用，關(guān)鍵在于用。
肯定有很多前端程序猿聯(lián)調(diào)前很悠閑??，但聯(lián)調(diào)階段持續(xù)加班，直到提測(cè)、上線。
這其中緣由不外乎需求不明確等原因，但如果我們能在聯(lián)調(diào)前完成大部分工作，相信就能準(zhǔn)點(diǎn)下班啦??。如果你也有類(lèi)似的現(xiàn)象，希望能看完此篇，或許能讓你在不協(xié)調(diào)的工作中解放出來(lái)。
可以先加個(gè)收藏（Ctrl + D 或 command + D），以備不時(shí)之需。
背景
在開(kāi)發(fā)環(huán)境中，由于后端與前端并行開(kāi)發(fā)、或者前端需要等待后臺(tái)接口開(kāi)發(fā)。接口直接嚴(yán)重依賴(lài)，生成數(shù)據(jù)的業(yè)務(wù)邏輯復(fù)雜等，嚴(yán)重影響了開(kāi)發(fā)效率。
因此學(xué)會(huì)使用最適合自己的 Mock 數(shù)據(jù)的方法就非常重要。
下面介紹了幾種常用的mock方案，通過(guò)了解自動(dòng)化mock的方式，減少重復(fù)工作，減少真實(shí)聯(lián)調(diào)問(wèn)題，我們可以根據(jù)開(kāi)發(fā)場(chǎng)景，選擇并配置最合適自己的方案。
六類(lèi)常用的MOCK方案說(shuō)明
方案①：代碼侵入 (實(shí)際開(kāi)發(fā)中最常用，但不推薦)
特點(diǎn)：直接在代碼中寫(xiě)死 Mock 數(shù)據(jù)，或者請(qǐng)求本地的 JSON 文件
優(yōu)點(diǎn)：無(wú)
缺點(diǎn)：
和其他方案比 Mock 效果不好 與真實(shí) Server 環(huán)境的切換非常麻煩，一切需要侵入代碼切換環(huán)境的行為都是不好的
方案②：接口管理工具
代表：
rap[2]（阿里，已停止維護(hù)，使用rap2）
swagger[3]
moco[4]（參考[5], 和前端處理mock類(lèi)似，json假數(shù)據(jù)+服務(wù)）
yapi[6](去哪兒網(wǎng)開(kāi)發(fā)yapi 官網(wǎng)[7])
優(yōu)缺點(diǎn)(接口管理工具)
優(yōu)點(diǎn)：
配置功能強(qiáng)大，接口管理與 Mock 一體，后端修改接口 Mock 也跟著更改，可靠 有統(tǒng)一的接口管理后臺(tái)，查找使用方便。 缺點(diǎn)：
配置復(fù)雜，依賴(lài)后端，可能會(huì)出現(xiàn)后端不愿意出手，或者等配置完了，接口也開(kāi)發(fā)出來(lái)了的情況。mock數(shù)據(jù)都由后臺(tái)控制，有什么異常情況 前端同學(xué)基本上使不上力。有背前后臺(tái)分離的原則。 一般會(huì)作為大團(tuán)隊(duì)的基礎(chǔ)建設(shè)而存在， 沒(méi)有這個(gè)條件的話(huà)需慎重考慮 增加后臺(tái)負(fù)擔(dān)，與其讓后臺(tái)處理mock數(shù)據(jù)相關(guān)問(wèn)題，倒不如加快提供真實(shí)接口數(shù)據(jù)。
方案③：本地 node 服務(wù)器
代表：json-server[8]
原理：使用lowdb[9]，操作本地小型的數(shù)據(jù)庫(kù)(遵循 REST API)。特點(diǎn)：
可以獨(dú)立使用，也可以作為node服務(wù)的中間件 server.use(db)db可以是json文件(更直觀)，也可以使js文件(靈活性更高) 可以設(shè)置跨域、開(kāi)啟gzip、設(shè)置延時(shí)、日志、指定路由等。 json-server [options]可命令行啟動(dòng)或 json-server.json?配置后直接啟動(dòng)可以自定義路由映射(key為真實(shí)路由、value為mock路由) 輕而易舉的實(shí)現(xiàn)后臺(tái)功能
過(guò)濾：GET /list?name.age=18；
分頁(yè):?/users?_page=3&_limit=5
排序：/users?_sort=id&_order=desc
分隔：/users?_start=2&_end=5
運(yùn)算：使用?_gte 或?_lte 選取一個(gè)范圍、使用?_ne 排除一個(gè)值、使用?_like 進(jìn)行模糊查找?(支持正則表達(dá)式)
......
復(fù)制代碼
服務(wù)管理
增刪改查參考postman示例。（注意body-raw要選擇json模式）
優(yōu)點(diǎn)：
配置簡(jiǎn)單，json-server 甚至可以 0 代碼 30 秒啟動(dòng)一個(gè) REST API Server 自定義程度高，一切盡在掌控中 增刪改查真實(shí)模擬
缺點(diǎn)：
與接口管理工具相比，無(wú)法隨著后端 API 的修改而自動(dòng)修改
方案④：請(qǐng)求攔截[MOCKJS]
代表：Mock.js[10]
特點(diǎn)：
通過(guò)攔截特定的AJAX請(qǐng)求，并生成給定的數(shù)據(jù)類(lèi)型的隨機(jī)數(shù)，以此來(lái)模擬后端同學(xué)提供的接口。 使用數(shù)據(jù)模板定義，隨機(jī)生成定義數(shù)據(jù)的自由度大。使用MockJS的Random工具類(lèi)的方法定義，這種方式自由度小，只能隨機(jī)出MockJS提供的數(shù)據(jù)類(lèi)型。 一般配合其它庫(kù)使用或單獨(dú)在項(xiàng)目中使用或者通過(guò)反向代理來(lái)實(shí)現(xiàn)。
使用格式說(shuō)明:
Mock.mock( rurl?, rtype?, template|function( options ) )
rurl：可選，攔截的url地址，可以是字符串或正則(常用) rtype: 可選，攔截的請(qǐng)求類(lèi)型，字符串（對(duì)大小寫(xiě)敏感，必須小寫(xiě)）。 template|function( options )：必須，攔截后返回的數(shù)據(jù)。template一般為json對(duì)象類(lèi)型；function在return時(shí)需要返回template，其中option包含請(qǐng)求的 url、type?和?body屬性只傳template，則執(zhí)行Mock.mock后返回的是``template的實(shí)際結(jié)果``。
簡(jiǎn)單示例展示：
隨機(jī)生成顏色
Mock.mock('@color')?
"#f279ba"
復(fù)制代碼
隨機(jī)生成郵箱
Mock.mock('@email')
"[email protected]"
復(fù)制代碼
隨機(jī)生成ip
Mock.mock('@ip')
"44.122.28.106"
復(fù)制代碼
隨機(jī)生成區(qū)域地址
Mock.mock('@region')
"東北"
復(fù)制代碼
還能隨機(jī)生成圖片（并可傳參配置圖片大小、顏色等）
Random.image()?
復(fù)制代碼
隨機(jī)生成日期時(shí)間
Random.date()
//?=>?"2020-10-23"
Random.date('yyyy-MM-dd')
//?=>?"1998-01-29"
Random.time()
//?=>?"22:44:56"
Mock.mock('@time')
//?=>?"01:48:17"
復(fù)制代碼
按規(guī)則生成字符串
//?指定范圍的數(shù)量
Mock.mock({?"string|1-10":?"★"?})?//?執(zhí)行后
{?"string":?"★★"?}?//?隨機(jī)生成數(shù)量為1-10個(gè)'*'字符串
//?固定數(shù)量
Mock.mock({?"string|3":?"*"?})??//?執(zhí)行后
{?"string":?"***"?}?//?生成指定數(shù)量的'*'（示例是3個(gè)）字符串
復(fù)制代碼
生成指定范圍內(nèi)的數(shù)字
//?整數(shù)
Mock.mock({?"number|1-100":?100?})?//?執(zhí)行后
{?"number":?84?}?//?生成1-100范圍內(nèi)的數(shù)字
//?小數(shù)
Mock.mock({?"number|1-100.1-10":?1?})?//?執(zhí)行后
{?"number":?72.15917?}?//?生成1-100的數(shù)字，隨機(jī)保留1-10位小數(shù)
復(fù)制代碼
生成隨機(jī)的對(duì)象數(shù)量
Mock.mock({?"object|2-4":?{?
"110000":?"北京市",?
"120000":?"天津市",?
"130000":?"河北省",
"140000":?"山西省"?
}})?
//?執(zhí)行后，隨機(jī)獲取對(duì)象中的2-4項(xiàng)
{?"object":?{?
"120000":?"天津市",?
"130000":?"河北省"?
}?}
復(fù)制代碼
生成指定數(shù)量的數(shù)組
Mock.mock({?"array|1":?[?"AMD",?"CMD",?"UMD"?]?})
{?"array":?"CMD"?}?//?隨機(jī)獲取對(duì)象中的一項(xiàng)
復(fù)制代碼
生成對(duì)象數(shù)組
// list指定了數(shù)組當(dāng)中的對(duì)象數(shù)量，最少一項(xiàng)，最多10項(xiàng)。
Mock.mock({
????//?屬性?list?的值是一個(gè)數(shù)組，其中含有?1?到?10?個(gè)元素
????'list|1-10':?[{
????????//?屬性?id?是一個(gè)自增數(shù)，起始值為?1，每次增?1
????????'id|+1':?1
????}]
})
//?隨機(jī)的結(jié)果
{
????"list":?[
????????{
????????????"id":?1
????????},
????????{
????????????"id":?2
????????}
????]
}
復(fù)制代碼
......
更多示例可查看官方鏈接[11]
語(yǔ)法規(guī)范
> 數(shù)據(jù)模板定義
定義規(guī)則：'key|rules': value
屬性值的數(shù)據(jù)類(lèi)型可以是Number、Boolean、String、Object、Array、Function、Null，不可以是Undefined
'name|min-max':?value
'name|count':?value
'name|min-max.dmin-dmax':?value
'name|min-max.dcount':?value
'name|count.dmin-dmax':?value
'name|count.dcount':?value
'name|+step':?value
'regexp':?/\d{5,10}/,
復(fù)制代碼
攔截接口返回示例：
步驟：
1.?創(chuàng)建mock.js文件
//?正則匹配?/notification\/count/?的接口
Mock.mock(/notification\/count/,?{
??"code":?200,
??"msg":?"success",
??"data":?{
??????"count":?3
??}
})
2.?在入口中引入mock即可
其它優(yōu)化：
在npm script中增加命令并添加mock環(huán)境變量，開(kāi)發(fā)環(huán)境中用該命令啟動(dòng)。
在入口文件中使用mock環(huán)境變量判斷是否加載mock.js，使mock數(shù)據(jù)和業(yè)務(wù)代碼徹底分離。
復(fù)制代碼
> 查看和使用random
**全局使用**
npm?install?mockjs?-g
random?-h?查看可使用的模板
復(fù)制代碼
局部使用
隨機(jī)生成數(shù)據(jù)
Mock.mock( { email: '@email' } )占位符 等同于 調(diào)用了Mock.Random.email(), 隨機(jī)生成email。
還可隨機(jī)生成圖片、顏色、地址、網(wǎng)址、自增數(shù)等。
**擴(kuò)展模板（自定義MOCK數(shù)據(jù)的模板）**
Random.extend({
????constellation:?function(date)?{
????????var?constellations?=?['白羊座',?'金牛座',?'雙子座',?'巨蟹座',?'獅子座',?'處女座',?'天秤座',?'天蝎座',?'射手座',?'摩羯座',?'水瓶座',?'雙魚(yú)座']
????????return?this.pick(constellations)
????}
})
復(fù)制代碼
> Mock.valid(template, data) 校驗(yàn)數(shù)據(jù)
var?tempObj?=?{
??"user|1-3"?:?[{'name':'@name',?'id|28-338':?88}]
?};
?var?realData?=?{?"user":[{'name':?'張三','id':90?}]};
?//?校驗(yàn)通過(guò)返回空數(shù)據(jù)，不通過(guò)則返回原因。（可以有多條原因，因此返回的是數(shù)組對(duì)象結(jié)構(gòu)）
?console.log(Mock.valid(tempObj,realData));?
復(fù)制代碼
> Mock.toJSONSchema( template )
把 Mock.js 風(fēng)格的數(shù)據(jù)模板 template 轉(zhuǎn)換成 JSON Schema[12]。
> Mock.setup( settings )
配置攔截 Ajax 請(qǐng)求時(shí)的行為。支持的配置項(xiàng)有：timeout。
Mock.setup({
????timeout:?400
})
Mock.setup({
????timeout:?'200-600'
})
復(fù)制代碼
優(yōu)缺點(diǎn)(MOCKJS)
優(yōu)點(diǎn)：
與前端代碼分離 可生成隨機(jī)數(shù)據(jù) 缺點(diǎn)：
數(shù)據(jù)都是動(dòng)態(tài)生成的假數(shù)據(jù)，無(wú)法真實(shí)模擬增刪改查的情況 只支持 ajax，不支持 fetch
方案⑤：抓包工具
利用?
Charles?、Fiddler等代理工具，
常見(jiàn)的處理方式有
將 URL 映射到本地文件；(調(diào)試APP混合開(kāi)發(fā)等) debugger某個(gè)url，修改響應(yīng)數(shù)據(jù)。 攔截后返回本地的數(shù)據(jù)，如 Charles，直接采用Map locale 或者 Map Remote的方式。
右擊url, copy response 在本地新建mock json數(shù)據(jù)，然后將response粘貼修改 再次訪問(wèn)url，觀察api的變化。 優(yōu)缺點(diǎn)：
優(yōu)點(diǎn)：mock便于混合開(kāi)發(fā)的問(wèn)題排查、線上問(wèn)題排查等。
缺點(diǎn)：調(diào)試相對(duì)繁瑣。
方案⑥：組合模式
代表：easy-mock[13]（提供在線服務(wù)和接口代理，支持mockjs、Swagger[14]、restapi風(fēng)格）
node框架生成器 + json-server[15] + mockjs。
REST API
URI 代表 資源/對(duì)象，METHOD 代表行為 www.ruanyifeng.com/blog/2014/0…[16]
GET?/tickets?//?列表
GET?/tickets/12?//?詳情
POST?/tickets??//?增加
PUT?/tickets/12?//?替換
PATCH?/tickets/12?//?修改
DELETE?/tickets/12?//?刪除
資源負(fù)數(shù)名稱(chēng)表示對(duì)應(yīng)表的資源集合，方法動(dòng)詞。
復(fù)制代碼
點(diǎn) 我[17] 了解 patch vs put
其它方案參考
apifox
API 文檔、調(diào)試、Mock、自動(dòng)化測(cè)試一體化協(xié)助平臺(tái)[18]
看評(píng)論推薦的人還真不少??，感興趣的小伙伴可以嘗試一下。支持 HTTP、TCP、RPC,(2020-12-28首版發(fā)布)
常用解決方案：
使用 Swagger 管理 API 文檔 使用 Postman 調(diào)試 API 使用 RAP 等工具 Mock API 數(shù)據(jù) 使用 JMeter 做 API 自動(dòng)化測(cè)試
jsonplaceholder
很方便，直接fetch遠(yuǎn)程的數(shù)據(jù)即可，高效易用jsonplaceholder官方文檔[19]
最后
Mock不只是mock數(shù)據(jù)，還可以mock功能的。我們通過(guò)使用Mock盡可能的完善功能，才能在聯(lián)調(diào)時(shí)事半功倍。
如果覺(jué)得有幫助，不妨點(diǎn)贊、關(guān)注支持一下。如文章有不足之處、疑問(wèn)或建議，希望能在下方???? 留言，非常感謝。
MOCK數(shù)據(jù)原理可參考我之前寫(xiě)過(guò)的這篇文章：Javascript 如何全面接管xhr請(qǐng)求[20]
關(guān)于本文
來(lái)源：tager
https://juejin.cn/post/7026165301255340045