摘要：引言前端開發(fā)經(jīng)常需要等待后端的接口，嚴(yán)重影響了開發(fā)效率，我們一般采用方式來(lái)避免這個(gè)問(wèn)題。可能會(huì)涉及到門技術(shù)，分別是服務(wù)端技術(shù)隨機(jī)生成特定格式數(shù)據(jù)的技術(shù)請(qǐng)求轉(zhuǎn)發(fā)請(qǐng)求攔截。

前端開發(fā)經(jīng)常需要等待后端的接口，嚴(yán)重影響了開發(fā)效率，我們一般采用mock方式來(lái)避免這個(gè)問(wèn)題。本人參考了大量文章，結(jié)合自己的經(jīng)驗(yàn)，給出自己在mock上的一些理解。

何為mock,我認(rèn)為mock主要就是通過(guò)正常請(qǐng)求在后端接口進(jìn)度落后的情況下，還能獲取到和后端約定數(shù)據(jù)結(jié)構(gòu)一樣的模擬數(shù)據(jù)的一門技術(shù)，以避免后端接口進(jìn)度滯后影響我們正常的開發(fā)。
mock可能會(huì)涉及到4門技術(shù)，分別是服務(wù)端技術(shù)、隨機(jī)生成特定格式數(shù)據(jù)的技術(shù)、請(qǐng)求轉(zhuǎn)發(fā)、請(qǐng)求攔截。

將模擬數(shù)據(jù)直接寫在代碼里

優(yōu)點(diǎn)：簡(jiǎn)單暴力
缺點(diǎn)：改變了代碼原有邏輯，且耦合度高，當(dāng)后端接口完成的時(shí)候還需要再改代碼。

mockjs

mockjs通過(guò)改寫ajax函數(shù)來(lái)實(shí)現(xiàn)攔截請(qǐng)求，同時(shí)它還能偽造各種隨機(jī)數(shù)據(jù)，通過(guò)mockjs我們能很方便的實(shí)現(xiàn)簡(jiǎn)單的mock效果，
優(yōu)點(diǎn)：簡(jiǎn)單方便
缺點(diǎn)：在chrome里面沒法看請(qǐng)求（查看傳遞的參數(shù)是否正確），不支持fetch（需要額外調(diào)用插件）

Mock.mock("/api/news", { name: "Jack", "age|10-20": 10 });

Charles、 Fiddler 、postman

利用 Charles、 Fiddler 等代理工具攔截請(qǐng)求
優(yōu)點(diǎn)：有真實(shí)的請(qǐng)求
缺點(diǎn)：配置上優(yōu)點(diǎn)復(fù)雜

node/express/json-server + mockjs/fakejs

Mock Server簡(jiǎn)單的說(shuō)就是起一個(gè)服務(wù)器，服務(wù)器提供接口產(chǎn)生相應(yīng)的mock數(shù)據(jù)
前者用來(lái)起服務(wù)，后者用來(lái)產(chǎn)生模擬數(shù)據(jù)。
json-server是對(duì)express的一個(gè)封裝，用于快速構(gòu)建服務(wù)器而不用寫后臺(tái)代碼
這里重點(diǎn)注意一下，對(duì)于一般的項(xiàng)目我們可以用json-server起一個(gè)服務(wù)，但是如果是在vue-cli之類的webpack生成的項(xiàng)目里面，實(shí)際上webpack已經(jīng)幫我們起了一個(gè)服務(wù)，我們可以在webpack的devServer.before里面進(jìn)行配置。當(dāng)然你要不嫌麻煩，可以用proxy代理到自己到j(luò)son-server起的服務(wù)上....

devServer: {
    // proxy: {  //額外起一個(gè)服務(wù)，然后進(jìn)行轉(zhuǎn)發(fā)
    //   "/api": {
    //     target: "json-server服務(wù)的ip：端口號(hào)",
    //     pathRewrite: { "/api": "" }
    //   }
    // }
    before: function(app) {  //直接用devserver這個(gè)服務(wù)
      app.get("/api/news", function(req, res) {
        res.json({ msg: "dev-before" })
      })
    }
  }

優(yōu)點(diǎn)：真實(shí)，低耦合，可擴(kuò)展
缺點(diǎn)：后端參與較少

RAP/Easy-Mock

對(duì)于小型開發(fā)團(tuán)隊(duì)的話，Mock Server或者mockjs完全夠了，因?yàn)榇藭r(shí)前后端溝通代價(jià)比較小。但是如果是大型開發(fā)團(tuán)隊(duì)呢，這時(shí)候，文檔的編寫，接口的變更，通知到每一個(gè)人，代價(jià)就比較大了。
這也是RAP，Easy-Mock這類mock平臺(tái)由來(lái)的原因。
優(yōu)點(diǎn)：接口代理，協(xié)同編輯，mock數(shù)據(jù)，智能提醒，自動(dòng)生成文檔
缺點(diǎn)：你要說(shuō)服后端使用它

這里就假設(shè)我們用devServer.before + mock.js來(lái)開發(fā)
假設(shè)后端要開發(fā)兩個(gè)接口 www.test/api/news/, www.test/api/price/
3.1 后端開沒開動(dòng)
我們?cè)赿evServer虛擬兩個(gè)接口

//在devserver里面配置before進(jìn)行接口攔截

devServer: {
    before: function(app) {
      app.get("www.test/api1/news", function(req, res) { //只對(duì)api1進(jìn)行攔截
        res.json({ mockjs產(chǎn)生的模擬數(shù)據(jù) })
      })
      app.get("www.test/api1/price", function(req, res) { //只對(duì)api1進(jìn)行攔截
        res.json({ mockjs產(chǎn)生的模擬數(shù)據(jù) })
      })
    }
  }

//在/src/api/index.js里面
const getNews = axios.get(www.test/api1/news)
const getPrice = axios.get(www.test/api1/price)
export {
getNews,getPrice
}
// 由于/api1會(huì)被before攔截從而得到mock數(shù)據(jù)，沒有問(wèn)題

3.2 后端開發(fā)了部分接口，比如www.test/api/news/開發(fā)完畢

//在/src/api/index.js里面修改/api1為/api
const getNews = axios.get(www.test/api/news)  //此時(shí)這個(gè)請(qǐng)求不會(huì)被攔截，走真實(shí)接口，而未開發(fā)完的接口請(qǐng)求還是走模擬數(shù)據(jù)接口

3.3 后端全部開發(fā)完畢

全部將/api1修改為/api,同時(shí)注釋掉devserver.before

當(dāng)然，這個(gè)攔截功能也可以直接用mockjs來(lái)做，步驟差不多，但是更簡(jiǎn)單

現(xiàn)階段暫時(shí)無(wú)法接口聯(lián)動(dòng)，也就是對(duì)于前端來(lái)說(shuō)，接口變更或者開發(fā)完成，還需要手動(dòng)在ide上修改代碼。如果能夠開發(fā)一套插件，前端只需初始編寫一次代碼，后面ide自動(dòng)同步接口變化，然后自動(dòng)修改代碼，不是爽歪歪！

今天關(guān)于前端mock的介紹就到這里，具體的代碼實(shí)現(xiàn)可以自行g(shù)oogle。由于作者剛參加工作，水平有限，如果哪里寫到不對(duì)，請(qǐng)?jiān)u論指出。

中小型項(xiàng)目，推薦使用mockjs或者devServer.before，如果項(xiàng)目比較大,多人協(xié)作，還是建議使用在線mock平臺(tái)。