前端模擬接口數據（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

高級 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

後記

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