如何使用 Mock

Mock 能做什么?

1.API 没开发好,使用 Mock 快速对接

在产品经理发布需求后,前后端同学先根据功能需求出一份 API 文档,然后再按照 API 文档并行开发。

不依赖后端提供数据的情况下,如何让前端独立于后端进行开发呢?

使用 Mock,你可以在开发环境代码内置 Mock,拦截请求,模拟真实 API 返回。如果公司使用了接口管理平台,文档发布的时候可以还通过平台生成 Mock API 直接对接。

2.为测试提供数据

使用Mock 假数据替代我们想控制但控制困难的部分

例如

  • 某些 API 依赖其他 API 的返回值,使用 Mock 方便的对返回值进行改变,测试不同场景下 API 的表现。
  • 某个 API 特别慢,可以暂时用 Mock 代替它,快速调通整个场景测试流程。

3.方便快速建立功能原型

敏捷开发过程中,调整需求是很常见的。通过 Mock 可以快速建立功能原型,直观的看到业务逻辑,方便产品调整需求,还可以使用假数据对系统进行演示。

Mock 部署

记录以下三种方案,各有千秋。

1.将 Mock 写到代码变量中,哪里需要写哪里

例如

优点

  • 成本低,使用简单,只需要学习 Mock.js 模板语法。
  • 不受网络影响。
  • 改动 Mock 能够快速看到效果。

缺点

  • Mock 代码与业务代码耦合高,上线容易遗漏测试代码,为代码偷偷埋下一颗地雷。
  • 无法快速响应文档改动,保持 Mock 返回数据与文档一致。
  • 只有前端开发人员能用到 Mock,无法与其他部门人员协同工作。
  • 没有 API 请求,不够真实。

2. Mock.js 拦截请求

使用 Mock.mock 函数拦截请求

var data = Mock.mock("https://www.baidu.com", {
    "string|1-10": "★", //随机生成 1-10 个字符串"★"
})
var request = new XMLHttpRequest();
request.open("GET", "https://www.baidu.com", true);
request.send();
request.onreadystatechange = function () {
    if (request.readyState === 4 && request.status === 200) {
        console.log(request.responseText)
    }
}

控制台输出

优点

  • 成本低,使用简单,学习 Mock.js 模板语法、 Mock.mock 函数。
  • 不受网络影响。
  • 改动 Mock 能够快速看到效果。

缺点

  • 对于 RESTful 风格的 API,需要写正则匹配请求地址。
  • Mock 代码与业务代码仍存在耦合,可以独立一个 Mock 文件夹,上线构建时不打包进业务代码。
  • 无法快速响应文档改动,保持 Mock返回数据与文档一致;
  • API 请求被 Mock 拦截,没有实际发送,不够真实。
  • 只有前端开发人员能用到 Mock,无法与其他部门人员协同工作。

3. Mock Server

和实际请求 HTTP API 没有区别,API 的响应值不是真实从数据库获取的数据,而是 Mock 生成的假数据。

一般是后端人员维护 Mock Server,他们改动 API 的时候同步改动 mock,前端不用考虑 Mock,只需要变更请求地址。

优点

  • 维护文档的人员可以维护 Mock,文档改动同时改动 Mock,响应迅速!
  • 协同方便,测试人员可以利用开发建立的 Mock 提前建立单元测试。
  • 使用工具的话可以通过用户界面管理 Mock 数据。

缺点

  • 需要花钱(部署服务器的钱或者 Sass 付费)
  • 需要选择靠谱的工具,否则使用工具的提高的效率跟不上你帮工具找 Bug 的速率
  • 额外管理 Mock Server,前端无法快速改变 Mock 值。

自己搭建

针对各种语言的部署方案教程丰富,例子不举了,自个儿搜。

平台部署

Eolinker

在线网站,无需部署。免费版本支持 3 人协作,超过 3 人需要开通付费版。

可以管理 API 文档,系统提供的 Mock 功能通过 API 文档返回值信息快速生成随机数据。支持设置触发条件(请求头、请求体),根据不同的触发条件得到不同的返回值。

Easy Mock

没使用过,支持在线(在线版本可能不够稳定),也支持本地部署。

Mock 数据生成规范

可以通过两种方式告诉 Mock 如何生成数据,一种是自定义规则的数据模板,一种是占位符,提供一些常见的随机值,例如·图片、邮箱、人名等。

1.数据模板定义规范(Data Template Definition,DTD)

先看一个示例,Mock.mock 函数根据相应的数据模板生成相应 JSON。

Mock.mock({
 "string|1-10": "★",//随机生成 1-10 个字符串"★"
 "string2|3": "★",//固定生成 3 个字符串"★"
 "number|+1": 202,//每次请求自增 1,初始值为 202
 "number2|1-100.1-10": 1,//生成一个浮点数,整数部分1-100,小数部分保留1-10 位。。
 "boolean|1-2": true,//值为 true 的概率是 1/(1+2),值为 false 的概率同样是 2/3。
 "regexp": /[a-z][A-Z][0-9]/,//随机生成满足正则的字符串
 "object|2": {
   "310000": "上海市",
   "320000": "江苏省",
   "440000":"广东省"
 },//对象中随机选取 2 个属性,生成对象
 "array|1": [ "AMD","CMD"],//数组中随机选取 1 个元素,最终生成值
 "arrayRepeat|3": ["AMD","CMD"],//重复数组元素 3 次,最终生成数组
 "date":"@date"//生成随机日期
})

生成结果

{
 "string": "★★",
 "string2": "★★★",
 "number": 202,
 "number2": 71.73566,
 "boolean":true,
 "regexp": "qS8",
 "absolutePath": "★★ demo",
 "object": {
   "310000": "上海市",
   "440000": "广东省"
 },
 "array": "AMD",
 "arrayRepeat": ["AMD","CMD", "AMD","CMD",AMD","CMD"],
 "date":"1980-12-19"
}

数据模板中的每个属性由 3 部分构成:属性名、生成规则、属性值:

// '属性名|生成规则':属性值
'name|rule': value

针对不同的属性值,生成规则的意义也不一样,有的生成规则是概率(Boolean),有的生成规则是重复。具体的意义可以查阅 Mock.js 官方文档

2.数据占位符定义规范(Data Placeholder Definition,DPD)

占位符是 mock 提供一些常用的随机数据例如随机生成的图片、邮箱、人名等。

用法1: 直接使用

Mock.mock('@date')//1982-10-15
Mock.Random.date()//1997-12-31

用法2: 在数据模板中使用

Mock.mock({
  "date":"@date",//随机日期
  "float":"@float",//随机浮点数
  "name":"xxxx",//固定值
  "quoteStrin1": "@name",//引用其他属性
  "user": {
    "name": "demo"
  },//固定值
  "quoteString": "@user/name",//引用其他属性
 })
{
    "date":"2020-06-29",
    "float":2202285915843574.5,
    "name":"xxxx",
    "quoteStrin1":"xxxx",
    "user ":{
       "name":"demo"
    },
    "quoteString":"demo"
}

需要注意,如果引用的属性名和 Mock 占位符名称一样(上面例子中的 quoteStrin1),引用值优先级比占位符高,所以最后 quoteStrin1 属性值与属性 name 的属性值一致,而不是占位符生成的值(Paul Miller)。

Mock 函数

1.Mock.mock

拦截请求,生成模拟数据

var data = Mock.mock("https://www.baidu.com", {
    "string|1-10": "★", //随机生成 1-10 个字符串"★"
})
var request = new XMLHttpRequest();
request.open("GET", "https://www.baidu.com", true);
request.send();
request.onreadystatechange = function () {
    if (request.readyState === 4 && request.status === 200) {
        console.log(request.responseText)
    }
}

直接生成模拟数据

var data = Mock.mock("https://www.baidu.com", {
    "string|1-10": "★", //随机生成 1-10 个字符串"★"
})
//{"string":"★★"}

2.Mock.Random

Mock.Random 是一个工具类,用于生成各种随机数据。 Mock.Random 提供的完整方法如下:

类型方法备注
Basicboolean, natural, integer, float, character, string, range
Datedate,time, datetime, now
Imageimage, dataImage生成图片地址
Colorcolor,hex,rgb,rgba,hsl
Textparagraph, sentence, word, title, cparagraph, csentence, cword, ctitle
Namefirst, last, name, cfirst, clast, cname
Weburl, domain,protocol, email, ip, tld
Addressregion,province,city,county,zip
Helpercapitalize, upper, lower, pick, shuffle方法,Mock.mock('@lower("HELLO")')->hello
Miscellaneousuuid,guid, id,increment

还可以使用 Random.extend 拓展占位符,官网示例:

Random.extend({
    constellation: function(date) {
        var constellations = ['白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '双鱼座']
        return this.pick(constellations)
    }
})
Random.constellation()
// => "水瓶座"
Mock.mock('@CONSTELLATION')
// => "天蝎座"
Mock.mock({
    constellation: '@CONSTELLATION'
})
// => { constellation: "射手座" }

参考资料

原文链接:juejin.im

上一篇:interval-arithmetic
下一篇:使用 Mock.js

相关推荐

  • 🆘 一次理解清楚,为什么使用 React useEffect 中使用 setInterval 获取的值不是最新的

    Intro 这篇文章将通过一个使用 React Hook 常遇到的问题(stale state)入手,尝试理解 Hook 的内部运行逻辑。 废话不多说,直接看示例Sandbox。

    9 天前
  • ()JavaScript的使用有什么用呢?

    ()JavaScript的使用有什么用呢?...

    2 年前
  • (深入)使用jQuery复制数组(复制)

    Communitymorgancodes(https://stackoverflow.com/users/1/community)提出了一个问题:(Deep) copying an array usi...

    2 年前
  • (二)使用 jenkins 灵活的构建项目

    (一)jenkins GitHub 实现项目自动化部署 一、想要灵活的构建项目的不同分支怎么办? 1、安装 Git Parameter 插件 打开系统管理 > 插件管理 (/public/u...

    2 个月前
  • (vuejs学习)2、使用ElementUI(*)

    1.element安装 开发环境是win10,一到node官网下载node的.msi包(https://npm.taobao.org/mirrors/node/v10.16.0/nodev10.16....

    1 年前
  • 高阶函数的使用

    问题 字节跳动面试时问题:原函数例如fetchData是一个异步函数,尝试从服务器端获取一些信息并返回一个Promise。写一个新的函数可以自动重试一定次数,并且在使用上和原函数没有区别。

    1 年前
  • 高效使用VSCode的9点建议

    译者按: 充分利用其特性,你会觉得 VSCode 非常强大! 为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。 在开源 IDE 市场,最近几年 Visual St...

    1 年前
  • 高德地图的使用 vue-amap+vue

    基本配置 1:在vue项目中下载vueamap npm install vueamap save 2: 在main.js引入高德地图 创建多边形的电子围栏 效果图 (/public/upl...

    1 个月前
  • 高德地图初使用手记

    前言 本文作为笔者初上手地图类需求开发的小记,没有深入的探讨,仅包含了一些初级API使用的记录与一些萌新踩坑的总结。 需求简述 产品给提了一个需求,需要用到高德地图组件将一组或多组经纬度坐标在地图中描...

    1 天前
  • 骚操作!在react中使用vuex

    原文地址(https://github.com/zyl1314/blog/issues/12) 前言 笔者最近在学习使用,提到react就绕不过去。redux是一个状态管理架构,被广泛用于rea...

    2 年前

官方社区

扫码加入 JavaScript 社区