淺談前端mock
引言
前端開發經常需要等待後端的介面，嚴重影響了開發效率，我們一般採用mock方式來避免這個問題。本人蔘考了大量文章，結合自己的經驗，給出自己在mock上的一些理解。由於作者剛參加工作，水平有限，如果哪裡寫到不對，請評論指出。
1. 原理
何為mock,我認為mock主要就是通過正常請求
在後端介面進度落後
的情況下，還
能獲取到和後端約定資料結構一樣的模擬資料
的一門技術，以避免後端介面進度滯後影響我們正常的開發。
mock可能會涉及到4門技術，分別是服務端技術、隨機生成特定格式資料的技術、請求轉發、請求攔截。
2. 常用手段分類
2.1硬剛型
將模擬資料直接寫在程式碼裡
優點：簡單暴力
缺點：改變了程式碼原有邏輯，且耦合度高，當後端介面完成的時候還需要再改程式碼。
2.2攔截型
mockjs
mockjs通過改寫ajax函式來實現攔截請求，同時它還能偽造各種隨機資料，通過mockjs我們能很方便的實現簡單的mock效果，
優點：簡單方便
缺點：無法模擬真實的請求，不支援fetch（需要額外呼叫外掛）
Mock.mock('/api/news', { name: 'Jack', 'age|10-20': 10 });
Charles、 Fiddler 、postman
利用 Charles、 Fiddler 等代理工具攔截請求
優點：有真實的請求
缺點：配置上優點複雜
2.3Mock Server
node/express/json-server + mockjs/fakejs
Mock Server簡單的說就是起一個伺服器，伺服器提供介面產生相應的mock資料
前者用來起服務，後者用來產生模擬資料。
json-server是對express的一個封裝，用於快速構建伺服器而不用寫後臺程式碼
這裡重點注意一下，對於一般的專案我們可以用json-server，但是如果是在vue-cli之類生成的專案裡面，實際上webpack已經幫我們起了一個服務，這是我如果我們想額外起一個json-server，就需要在vue.config.js裡面配置proxy。當然我們也可以不另外起服務，就用dev-server，在webpack的devServer.before裡面進行配置
devServer: {
// proxy: {//額外起一個服務，然後進行轉發
//'/api': {
//target: 'json-server服務的ip：埠號',
//pathRewrite: { '/api': '' }
//}
// }
before: function(app) {//直接用devserver這個服務
app.get('/api/news', function(req, res) {
res.json({ msg: 'dev-before' })
})
}
}
優點：真實，低耦合，可擴充套件
缺點：後端參與較少
2.4 Mock 平臺
RAP/Easy-Mock
對於小型開發團隊的話，Mock Server或者mockjs完全夠了，因為此時前後端溝通代價比較小。但是如果是大型開發團隊呢，這時候，文件的編寫，介面的變更，通知到每一個人，代價就比較大了。
這也是RAP，Easy-Mock這類mock平臺由來的原因。
優點：介面代理，協同編輯，mock資料，智慧提醒，自動生成文件
缺點：你要說服後端使用它
3 具體開發流程舉例
這裡就假設我們用devServer.before + mock.js來開發
假設後端要開發兩個介面www.test/api/news/, www.test/api/price/
3.1 後端開沒開動
我們在devServer虛擬兩個介面
在devserver裡面配置before
devServer: {
before: function(app) {
app.get('www.test/api1/news', function(req, res) { //只對api1進行攔截
res.json({ mockjs產生的模擬資料 })
})
app.get('www.test/api1/price', function(req, res) { //只對api1進行攔截
res.json({ mockjs產生的模擬資料 })
})
}
}
//在/src/api/index.js裡面
const getNews = axios.get(www.test/api1/news)
const getPrice = axios.get(www.test/api1/price)
export {
getNews,getPrice
}
// 由於/api1會被before攔截從而得到mock資料，沒有問題
3.2 後端開發了部分介面，比如www.test/api/news/開發完畢
//在/src/api/index.js裡面修改/api1為/api const getNews = axios.get(www.test/api/news)//此時這個請求不會被攔截，走真實介面，而未開發完的介面請求還是走模擬資料介面
3.3 後端全部開發完畢
全部將/api1修改為/api,同時註釋掉devserver.before
也可以直接用mockjs進行攔截，步驟差不多，但是更簡單
4. 展望
現階段暫時無法資料聯動
，也就是對於前端來說，介面變更，還需要手動在ide上修改程式碼。如果能夠開發一套外掛，前端只需初始編寫一次程式碼，後面ide自動同步介面變化，然後自動修改程式碼，不是爽歪歪！
總結
如果你目前的專案是中小型專案，那麼可以使用mockjs或者Mock Server之類，如果專案比較大，還是建議使用線上mock平臺。