前端模拟接口数据（mock）实践

前言

越来越多的公司将前端和后端彻底分离，以便能够支持后端一套接口，提供给 web, ios, android 使用，大大提高了开发的效率。但与此同时，也带来了前端 ui 依赖后端数据的问题，在后端的接口没有开发完成之前，前端需要根据接口定义的规范模拟接口数据。这个问题看似简单，但实际上在开发过程中，会是一个比较头疼的问题。

以往的做法

有基于前端和后端两种做法，前端大多数都是在业务代码里面先根据后端的接口定义，写一套模拟数据，也有基于 mockjs 通过拦截 xhr 方式。后端大多是先写一套测试数据的接口，提供给前端调用，等接口开发完成之后，在切换过来。无论是哪一种方式，都不可避免的有以下问题：

影响了业务的代码，经常能见到下面这种代码,注释了原有的代码逻辑，改成测试的模拟数据

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)
 })
}复制代码

后端接口数据结构发生变动，增加字段、修改字段名称了，无法及时反馈给前端开发者，更新滞后。
不容易模拟复杂情况，例如接口响应时间，生成各类模拟数据，如邮箱、手机号等等
```
{
 email: '[email protected]',
 phone: '18000803800'
}复制代码
```
在实际的开发过程中，我们不仅需要模拟正常情况下 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 的自动化测试和后端接口自动化测试。