通常一個需求過完TD之后，后端提供哪些接口，每個接口返回的字段也就已經確定了， 接下來就是前后端並行的開發。但經常會出現進度不一樣的情況，有時候前端開發完了接口還沒好，一直等待后端接口的話，會嚴重影響開發效率，采用mock方式可避免這個問題。
何為Mock？
Mock是一種根據約定規則進行數據模擬的技術，通過mock我們可以在不修改既有代碼的情況下，攔截ajax請求，返回模擬的響應數據。
總結起來mock有以下優點：
- 讓前端攻城師獨立於后端進行開發；
- 通過隨機數據，模擬各種場景，增加單元測試的真實性；
- 開發無侵入；
- 用法簡單，符合直覺的接口；
YApi的Mock服務
mock框架有很多，常見的有mock.js, EasyMock等，為什么選用YApi的mock呢？
-
YApi是公司主推的接口管理工具，支持swagger導入；
-
不用再自己寫mock規則，Yapi自帶mock服務，能夠根據接口的數據結構生成隨機數據；
-
每一個接口都對應一個mock地址，而且地址的規則是固定的
${yapi-host}/mock/${appid}/${api-path}，前端可以在不修改既有代碼的情況下，通過反向代理調用mock服務；
如何在項目中接入Yapi的mock服務
以Vue項目為例，前端只需3步就能通過yapi mock數據：
1. package.json文件，添加一個script
scripts {
...
"mock": "VUE_APP_MOCK=true VUE_APP_MOCK_BASE_API=/mock/<yapi-AppId>/ajax vue-cli-service serve"，
}
該命令設置了兩個變量，VUE_APP_MOCK指是否啟動mock，VUE_APP_MOCK_BASE_API為mock的base api，注意變量名必須以大寫的VUE_APP_開頭；
以EAS對接平台為例，正常的接口路徑為'/ajax/xxxx'，接口的mock地址為'/mock/1859/ajax/xxxxx',那參數VUE_APP_MOCK_BASE_API就可以設置為'/mock/1859/ajax';
2. 創建axios實例的時候根據配置項設置 baseurl
const http = Axios.create({
...
baseURL: process.env.VUE_APP_MOCK
? process.env.VUE_APP_MOCK_BASE_API : process.env.VUE_APP_BASE_API,
...
});
VUE_APP_BASE_API 是正常調用接口的base url， 通常為'/ajax';
3. vue.config文件配置 mock服務的反向代理
const vueConfig = {
devServer: {
proxy: {
'/mock/1859/ajax': {
https: true,
target: 'https://yapi.xrxr.xyz',
ws: true,
changeOrigin: true,
},
'/ajax': {
https: true,
target: 'https://easproxyadmin.aihaisi.com/',
ws: true,
changeOrigin: true,
},
},
},
注意順序：先‘mock/1859/ajax’，后配置‘ajax’
配置完后，運行 npm run mock，啟動項目就可以調用YApi的mock服務來mock數據了。
YApi mock服務的一些高級用法
定制生成規則
mock服務會根據接口定義生成隨機數據，這些數據能滿足接口類型的定義，但是有時候卻不合法。例如分頁信息pagesize，時間戳類型的字段，mock服務可能會返回一個負數，通過定制字段的規則可以避免這種情況。
- YApi中接口頁面點擊編輯
- 點擊需要調整的字段的設置按鈕
- 在設置彈窗中可以設置規則
高級mock
有時候不同的請求參數、IP地址返回不同的 HTTP Code、HTTP 頭和 JSON 數據，yapi的高級mock提供了兩種方式來解決這個問題。
1. Mock期望
YApi提供了交互式的彈窗來添加Mock期望。例如：想mock一下名稱是zwj的菜單列表
- 選中接口，點擊高級mock
- 點擊‘添加期望‘按鈕，填寫過濾規則以及期望返回數據，點擊『確定』保存。
- 運行項目，打開對應的頁面，調用接口查看返回的數據，結果就是高級mock中設置的期望返回數據。
2. 自定義腳本
自定義腳本是一種更靈活的方式。Mock期望的方式添加的條件只能是參數等於某個值，才能返回相應的數據，而自定義腳本可以添加一些邏輯判斷，根據用戶請求的參數修改返回內容。
舉個例子：批量同步接口，它接收一個日期范圍，同步所有待同步的數據，但如果日期范圍超過30天，返回錯誤提示。這個時候就可以用自定義腳步對mock請求進行判斷處理。
- 切換到腳步選項卡，輸入下面的腳步，點擊保存
if (params.end - params.start > 30*24*60*60*1000) {
mockJson.errMessage = '不能大於30天'
mockJson.success = false;
} else {
mockJson.success = true;
}
- 運行項目看下效果
Yapi提供了一些全局變量可以在腳本中使用：
請求
- header：請求的 HTTP 頭
- params：請求參數，包括 Body、Query 中所有參數
- cookie：請求帶的 Cookies
響應
- mockJson：接口定義的響應數據 Mock 模板
- resHeader：響應的 HTTP 頭
- httpCode：響應的 HTTP 狀態碼
- delay：Mock 響應延時，單位為 ms
- Random：Mock.Random 方法，可以添加自定義占位符,詳細使用方法請查看 Wiki
Mock 優先級說明
請求 Mock 數據時，規則匹配優先級：Mock 期望 > 自定義 Mock 腳本 > 項目全局 mock 腳本 > 普通 Mock。
總結
YApi的mock服務真的挺好用的， 接入也很簡單，前端小伙伴們可以試着用一用。