前端模擬介面資料（mock）實踐

hellosean發表於2017-10-29
前端Mock

前言

越來越多的公司將前端和後端徹底分離，以便能夠支援後端一套介面，提供給 web, ios, android 使用，大大提高了開發的效率。但與此同時，也帶來了前端 ui 依賴後端資料的問題，在後端的介面沒有開發完成之前，前端需要根據介面定義的規範模擬介面資料。這個問題看似簡單，但實際上在開發過程中，會是一個比較頭疼的問題。

以往的做法

有基於前端和後端兩種做法，前端大多數都是在業務程式碼裡面先根據後端的介面定義，寫一套模擬資料，也有基於 mockjs 通過攔截 xhr 方式。後端大多是先寫一套測試資料的介面，提供給前端呼叫，等介面開發完成之後，在切換過來。無論是哪一種方式，都不可避免的有以下問題：

  1. 影響了業務的程式碼，經常能見到下面這種程式碼,註釋了原有的程式碼邏輯，改成測試的模擬資料

    getUserData = (uid) =>{
 //return axios.get('/api/user/' + uid);
 return new Promise((resolve, reject)=> {
   setTimeout(()=>{
     return resolve({
       data: {
         errcode: 0,
         data: {
           uid: 1,
           username: 'tom'
         }
       }
     })
   }, 100)
 })
}複製程式碼

  2. 後端介面資料結構發生變動，增加欄位、修改欄位名稱了，無法及時反饋給前端開發者，更新滯後。

  3. 不容易模擬複雜情況，例如介面響應時間，生成各類模擬資料，如郵箱、手機號等等

    {
 email: 'abc@163.com',
 phone: '18000803800'
}複製程式碼

  4. 在實際的開發過程中，我們不僅需要模擬正常情況下 UI，還需要模擬資料出錯，資料為空時的 UI。

去哪兒前端介面 Mock 實踐

我們研發了 YApi平臺 管理我們前端介面資料的模擬, 只需要前後端去維護在 YApi 平臺定義的響應資料，就可以生成需要的模擬資料，下面這段程式碼就是定義的生成資料模板：

{
    "errcode": 0,
    "errmsg": "@string",
    "data": {
        "type":"@pick(1,2,3)",
        "list|1-10": [{
            "uid": "@id",
            "username": "@name"
        }]
    }
}複製程式碼

可生成如下的模擬資料：

{
  "errcode": 0,
  "errmsg": "^*!SF)R",
  "data": {
    "type": 2,
    "list": [
      {
        "uid": "370000200707276255",
        "username": "Ruth Clark"
      },
      {
        "uid": "650000200211185728",
        "username": "Anthony Martin"
      },
      {
        "uid": "370000199201143855",
        "username": "Laura Rodriguez"
      },
      {
        "uid": "610000198704072775",
        "username": "Anthony Perez"
      }
    ]
  }
}複製程式碼

使用方法

介面預覽頁面可看到 mock 地址，通過直接呼叫或者伺服器代理方式，就可獲取到隨機生成的資料，不會影響業務邏輯程式碼

image
image

高階 Mock

基礎的 Mock 工具已經能滿足大部分的需求了，但有些複雜場景是無法實現的。例如：當我做一個資料列表頁面，需要測試某個欄位在各種長度下的 ui 表現，還有當資料為空時 ui 的表現。YApi 提供了期望和自定義指令碼的功能幫忙前端開發者模擬各種場景。

Mock 自定義指令碼

自定義指令碼可根據請求的引數，cookie 資訊，使用 js 指令碼自定義返回的資料，推薦基於 cookie 生成不同的測試資料，這樣就能通過控制瀏覽器 cookie 值，獲取到不一樣的模擬資料。

if(cookie._type == 'error'){
    delay = 1000; //自定義響應時間
    header['Content-Type'] = 'application/json';//自定義 Header
    mockJson.errcode = 400;
}

if(cookie._type == 'empty'){
    httpCode = 400; //自定義 http 狀態碼
    mockJson.data.list = [];
}複製程式碼

Mock 期望

期望就是需要根據不同的請求引數、IP 返回不同的 HTTP Code、HTTP 頭和 JSON 資料，Mock 期望主要用於 ui 的自動化測試和後端介面自動化測試。

image
image

後記

YApi 已在去哪兒公司內部大面積使用，自上線以來，根據統計，每週有上萬+次 Mock 請求，獲得了很多同事的贊，為了讓 YApi 能夠服務更多小夥伴和使 YApi 變的更好，現已經開源到 github.com/ymfe/yapi
歡迎大家使用和提出寶貴的意見。

相關文章