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

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

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

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

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

mockjs

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

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

Charles、 Fiddler 、postman

利用 Charles、 Fiddler 等代理工具攔截請求
優(yōu)點：有真實的請求
缺點：配置上優(yōu)點復雜

node/express/json-server + mockjs/fakejs

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

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

優(yōu)點：真實，低耦合，可擴展
缺點：后端參與較少

RAP/Easy-Mock

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

這里就假設我們用devServer.before + mock.js來開發(fā)
假設后端要開發(fā)兩個接口 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產(chǎn)生的模擬數(shù)據(jù) })
      })
      app.get("www.test/api1/price", function(req, res) { //只對api1進行攔截
        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會被before攔截從而得到mock數(shù)據(jù)，沒有問題

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

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

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

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

當然，這個攔截功能也可以直接用mockjs來做，步驟差不多，但是更簡單

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

今天關于前端mock的介紹就到這里，具體的代碼實現(xiàn)可以自行google。由于作者剛參加工作，水平有限，如果哪里寫到不對，請評論指出。

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