淺談前端mock

引言

前端開發常常須要等待後端的接口，嚴重影響了開發效率，咱們通常採用mock方式來避免這個問題。本人蔘考了大量文章，結合本身的經驗，給出本身在mock上的一些理解。

1. 原理

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

2. 經常使用手段分類

2.1 硬剛型

將模擬數據直接寫在代碼裏

優勢：簡單暴力
缺點：改變了代碼原有邏輯，且耦合度高，當後端接口完成的時候還須要再改代碼。

2.2 攔截型

mockjs

mockjs經過改寫ajax函數來實現攔截請求，同時它還能僞造各類隨機數據，經過mockjs咱們能很方便的實現簡單的mock效果，
優勢：簡單方便
缺點：在chrome裏面無法看請求（查看傳遞的參數是否正確），不支持fetch（須要額外調用插件）

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

Charles、 Fiddler 、postman

利用 Charles、 Fiddler 等代理工具攔截請求
優勢：有真實的請求
缺點：配置上優勢複雜

2.3 Mock Server

node/express/json-server + mockjs/fakejs

Mock Server簡單的說就是起一個服務器，服務器提供接口產生相應的mock數據
前者用來起服務，後者用來產生模擬數據。
json-server是對express的一個封裝，用於快速構建服務器而不用寫後臺代碼
這裏重點注意一下，對於通常的項目咱們能夠用json-server起一個服務，可是若是是在vue-cli之類的webpack生成的項目裏面，實際上webpack已經幫咱們起了一個服務，咱們能夠在webpack的devServer.before裏面進行配置。固然你要不嫌麻煩，能夠用proxy代理到本身到json-server起的服務上....

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自動同步接口變化，而後自動修改代碼，不是爽歪歪！

總結

今天關於前端mock的介紹就到這裏，具體的代碼實現能夠自行google。因爲做者剛參加工做，水平有限，若是哪裏寫到不對，請評論指出。

中小型項目，推薦使用mockjs或者devServer.before，若是項目比較大,多人協做，仍是建議使用在線mock平臺。