本篇为你讲解什么是 Mock,如何使用 Mock 模拟接口响应数据

什么是 Mock

Web 开发时,我们经常会遇到一个问题,前端已经开发完成,但是服务端接口还没写好,这时候我们就可以使用 Mock 来生成模拟接口,它能模拟各种各样的数据,例如:人名、地址、整数、小数。这样就不用等待服务端接口了,只需要你们提前定义好接口字段。
如果你是使用 易文档 编写接口文档,还能为你一键生成 Mock 接口,非常方便。

Mock 模板怎么写

Mock 有自己的一套规则去生成模拟数据,例如:
"age|18-30": 1 生成一个 age 字段,限定在 18 到 30 岁
"money|30-100.1-3": 1 生成一个 money 字段,限定在 30 到 100 并且有 1 到 3位小数
"date": "@now" 生成现在时间字符串
"url": "@url" 生成域名
"city": "@city" 生成一个城市名
"regexp": /[a-z][A-Z][0-9]/ 使用正则生成数据
"head": "@image('200x100', '#50B347', '#FFF', 'Easydoc')" 生成 200x100 大小的图片

你甚至还可以写一个方法去生成一些更加复杂的数据,下面是使用方法随机返回数组中的一个名字

1
2
3
4
5
6
7
{
'name': ()=> {
let names = ["zhangsan", "lisi", "wangwu"]
let randomIndex = parseInt(Math.random() * names.length)
return names[randomIndex]
}
}

还有非常多的数据类型 所有示例,可以让你非常方便的生成想要的数据

下图就是使用 易文档 编写的一个模拟数据
易文档 Mock 接口数据

选择好 method 填写好 api 地址,这样我们就可以获取到这个模拟接口的数据了。
易文档 Mock 返回

如果还不是很清楚,还可以看下 Mock视频教程