共计 2275 个字符，预计需要花费 6 分钟才能阅读完成。
Mock.js 根底用法介绍
Mock.js 是一个罕用于生成随机数据和拦挡 Ajax 申请的 JavaScript 库。本文将介绍 Mock.js 的用法，包含装置和根底用法，在开始前咱们能够看下看： 理解 Mock.js 的语法标准。
装置
能够通过 npm 装置 Mock.js：
npm install mockjs
根底用法
随机生成一个用户信息
应用 Mock.js 能够很不便地生成随机数据。上面的示例中，每个用户信息包含随机生成的中文名、15-25 之间的年龄和随机的城市。代码如下所示：
const Mock = require('mockjs') const data = Mock.mock({'name': '@cname', 'age|15-25': 0, 'city': '@city'}) console.log(data)
运行下面的代码，可能会失去如下的输入后果：
{name: '张伟', age: 18, city: '羊城'}
随机生成一个用户信息数组
如果须要生成多个用户信息，能够定义一个 Mock.js 的数据数组模板，能够指定数组长度为 1 到 10 的随机数。代码如下所示：
const data = Mock.mock({'list|1-10': [{ 'name': '@cname', 'age|15-25': 0, 'city': '@city'}] }) console.log(data)
运行下面的代码，可能会失去如下的输入后果：
{"list": [ { "name": "陈芳", "age": 24, "city": "西宁"}, {"name": "罗娟", "age": 20, "city": "咸阳"} ] }
Mock.js API
上面介绍 Mock.js 中罕用的 API。
生成随机数据
Mock.Random 对象蕴含了 Mock.js 中的所有随机数据生成办法。上面是一些罕用的办法：
Mock.Random.boolean()：生成一个随机的布尔值。Mock.Random.integer(min, max)：生成一个随机的整数，能够指定范畴。Mock.Random.float(min, max, dmin, dmax)：生成一个随机的浮点数，能够指定范畴和精度。Mock.Random.string(length)：生成一个随机的字符串，能够指定长度。Mock.Random.name(middle?)：生成一个随机的常见英文姓名。Mock.Random.cname()：生成一个随机的常见中文姓名。Mock.Random.date()：生成一个随机的日期。Mock.Random.time()：生成一个随机的工夫。Mock.Random.datetime()：生成一个随机的日期工夫。Mock.Random.image(size, background, foreground, format, text)：生成一个随机的图片，能够指定大小、背景色、前景色、格局和文字。
生成数据模板指定的数据
Mock.mock(template) 依据数据模板生成模仿数据。数据模版能够生成简单的数据结构。上面是一个示例：
const data = Mock.mock({'name': '@cname', 'age|15-25': 0, 'email': /[a-z]{5}@163.com/, 'phone': /1[35789]\d{9}/ }) console.log(data)
运行下面的代码，可能会失去如下的输入后果：
{name: '杜浩', age: 15, email: 'xianq@163.com', phone: '13940684653'}
模仿接口申请
Mock.mock(url, template) 和 Mock.mock(method, url, template) 用于依据接口地址和数据模板模仿接口申请，反对 GET、POST、PUT、DELETE 等申请办法。示例如下：
Mock.mock('/user', 'get', { 'name': '@cname', 'age|15-25': 0, 'email': /[a-z]{5}@163.com/, 'phone': /1[35789]\d{9}/ }) Mock.mock('/user', 'post', { 'result': 'success'})
设置 Ajax 申请响应工夫
Mock.setup({timeout: 400}) 指定被拦挡的 Ajax 申请的响应工夫，示意 400 毫秒后才会返回响应内容。示例如下：
Mock.setup({timeout: '200-600'}) Mock.mock('/user', { 'name': '@cname', 'age|15-25': 0, 'email': /[a-z]{5}@163.com/, 'phone': /1[35789]\d{9}/ })
下面的代码示意，响应工夫介于 200 到 600 毫秒之间。
总结
本文介绍了 Mock.js 的根底用法，包含随机生成用户信息、随机生成用户信息数组、Mock.js API 的罕用办法、生成数据模板和模仿接口申请。Mock.js 是一个十分实用的数据模仿和接口测试工具，可能大大提高前端开发效率。想进阶成为一位 Mock 高手？Apifox 是一个弱小的接口文档管理工具，用 Apifox 能够让 Mock 变得更容易。Apifox 语法齐全兼容 Mock.js， 并扩大了一些 Mock.js 没有的语法（如国内手机号 @phone）。 小伙伴快去试试看吧~