Mock.js 学习笔记

简介

Mock.js 是一款前端开发中拦截 Ajax 请求在生成随机相应的工具，可以用来模拟服务器响应，优点是简单方便、无侵入性，基本覆盖常用的接口数据类型

安装

npm install mockjs -D

文件结构（以Vue-cli中为例）

创建具体业务的 mock 文件

import Mock from 'mockjs';
import {USER_API} from '@/components/demos/api.url'

Mock.mock(USER_API.getUser, {
  user: {
    name: 'chow'
  }
});

创建 mock.config.js，作为配置文件，用来配置拦截 ajax 请求是的响应时间

import Mock from 'mockjs'

Mock.setup({
  timeout: '300-1000'
});

创建 mock.js，作为顶层入口文件，引入各个具体业务的 mock 文件和配置文件 mock.config.js

import './mock.config';

import './components/demos/demo9/mock';

在 mock.config.js 中还可以预置一些常用的用于生成默认数据形态的方法

然后项目的入口文件 main.js 中引入入口文件 mock.js（关键）

import './mock'

这样就可以拦截ajax请求，同时返回模拟数据了

语法规范

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

// 属性名   name
// 生成规则 rule
// 属性值   value，指定了最终值的初始值和类型， 可以含有@占位符
'name|rule': value

生成规则有一下格式：
1. 'name|min-max': value
1. 字符串：返回重复 min-max 区间次数的 value 字符串
2. 数字：返回位于 min-max 区间的数字
3. 布尔值：值为 value 的概率为 min / (min + max)，值为 !value 的概率为 max / (min + max)
4. 对象：从对象 value 中随机抽取 min 到 max 个属性
5. 数组：通过重复 value 中所有元素生成一个新数组，重复次数大于等于 min，小于等于 max。
2. 'name|count': value: 返回固定值（或重复多次）
1. 字符串：返回重复 count 次的 value 字符串
2. 数字：返回等于 count 的数字
3. 布尔值：值为 true 的概率是 1/2，值为 false 的概率同样是 1/2
4. 对象：从对象 value 中随机抽取 count 个属性
5. 数组：
1. 'name|1': array：从数组中随机选取一个元素作为返回值
2. 'name|count': array：通过重复属性值 array 生成一个新数组，重复次数为 count
3. 'name|+count': array：从数组中顺序加上 count 选取一个元素作为返回值
3. 'name|min-max.dmin-dmax': value：整数部分位于 min-max 区间，小数部分的小数位数位于 dmin-dmax 之间
4. 'name|min-max.dcount': value：整数部分位于 min-max区间，小数部分的小数位数等于 dcount
5. 'name|count.dmin-dmax': value：整数部分等于 count，小数部分的小数位数位于 dmin-dmax 之间
6. 'name|count.dcount': value：整数部分等于 count，小数部分的小数位数等于 dcount
7. 'name|+step': value：每次返回值叠加 step
8. 'name': function：执行 function，取其返回值作为最终属性，函数的上下文为属性 name 所在对象
9. 'name': regexp：根据正则表达式 regexp 反向生成可以匹配它的字符串，用于生成自定义格式的字符串
JS
Mock.mock({
'regexp1': /[a-z][A-Z][0-9]/,
'regexp2': /\w\W\s\S\d\D/,
'regexp3': /\d{5,10}/
})
// =>
{
"regexp1": "pJ7",
"regexp2": "F)\fp1G",
"regexp3": "561659409"
}


占位符

占位符只是在属性值字符串中占个位置，并不出现在最终的属性值中。

占位符的格式为：

@占位符
@占位符(参数 [, 参数])

其中：
- 用 @ 来标识占位符
- 占位符引用 Mock.Radnom 中的方法，通过对相应的方法生成随机数据

Mock.mock()

核心方法，用来拦截 ajax 请求，并返回模拟数据

• Mock.mock( rurl, template )： 当拦截到匹配 rurl 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。
• Mock.mock( rurl, function( options ) )：当拦截到匹配 rurl 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。
• Mock.mock( rurl, rtype, template )：当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。注意 rtype 必须是小写

上面的参数：

• rurl： 表示需要拦截的 URL，可以是 URL 字符串或 URL 正则。例如 /\/domain\/list\.json/、'/domian/list.json'。
• rtype： 表示需要拦截的 Ajax 请求类型，例如 GET、POST、PUT、DELETE 等，注意必须是小写。
• template： 表示返回的数据模版
• options：函数中的参数 options指向本次请求的 Ajax 选项集，含有 url、type、body三个属性

Mock.setup(settings)

配置拦截 Ajax 请求时的行为。

支持的配置项有：timeout。指定被拦截的 Ajax 请求的响应时间，单位是毫秒。

Mock.setup({
    timeout: 400
})
Mock.setup({
    timeout: '200-600'
})

Mock.Random

一个工具类，生成各种随机数据，

var Random = Mock.Random
Random.email()
// => "[email protected]"
Mock.mock('@email')
// => "[email protected]"
Mock.mock( { email: '@email' } )
// => { email: "[email protected]" }

在模板中通过占位符 @ 引用

Mock.mock(new RegExp(USER_API.getUser), 'get', {
  user: {
    'name': '@url',
  },
});
// => rlogin://ilfm.tv/aygblcovk

完整方法分为几类：
- 基础：包括各种数字、字符、范围、时间、日期等
- 图像：返回图片的地址或者 base64 格式编码
- 颜色：返回颜色的十六进制颜色码
- 文字：包括中文或英文的段落、标题、句子、单词等
- 名字：包括中文活跃英文的完整名字和以及名和姓
- 网址：包括网址、域名、邮箱、ip、和tld
- 地址：包括方位
- 格式化：包括首字母大写、全部大写、全部小写、数组随机选一项、数组乱序

完整方法：

还可以通过 Mock.Random.extend() 来扩展内置方法，通过 @占位符 同样引用扩展的方法

import Mock from 'mockjs';

Mock.Random.extend({
  pinkOne(){
    let arr = ['白羊座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '双鱼座'];
    return this.pick(arr)
  }
});
Mock.mock(new RegExp(USER_API.getUser), 'get', {
  user: {
    'name': '@pinkOne',
  },
});

// => '狮子座'

参考

• https://github.com/nuysoft/Mock/wiki
• http://mockjs.com/examples.html
• https://segmentfault.com/a/1190000010211622