前端模拟接口数据（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欢迎你们使用和提出宝贵的意见。