在开发过程中，有很多的ajax请求，前后端分离开发你肯定遇到这样的问题，后台给你的接口文档，你需要在本地模拟数据返回，可能你也用到过我之前用的蠢方法，就是新建一个test.json文件，放入接口文档中写的返回示例，这么做有个很大的问题是不够灵活，而且还需要切换url，现在学会使用mock.js拦截ajax请求，更加方便的构造你需要的假数据。
一.简单示例
在这里我举的例子是在vue项目中如何使用mock.js。
- 安装mockjs
npm install mockjs --save-dev - 在项目中创建mock.js，并写一个简单的返回示例，后面拦截其他url的ajax请求直接参考这个示例。
//引入mockjs
import Mock from 'mockjs'
//使用mockjs模拟数据
Mock.mock('/\/api\/msdk\/proxy\/query_common_credit/', {
"ret":0,
"data":
{
"mtime": "@datetime",//随机生成日期时间
"score|1-800": 800,//随机生成1-800的数字
"rank|1-100": 100,//随机生成1-100的数字
"stars|1-5": 5,//随机生成1-5的数字
"nickname": "@cname",//随机生成中文名字
}
//data里的属性看不懂，需要详细看语法规范,博客链接:https://www.jianshu.com/p/4579f40e6108
});
-
main.js里面引入该文档
import './assets/js/mock'//此部分引入的是我们所编写的mockjs文档 -
xxx.vue文件中调用mock.js中模拟的数据接口，这时返回的response就是mock.js中用Mock.mock(‘url’,data）中设置的data了。
query_common_credit(){
var loginMode = 'msdk';//游戏内默认msdk(wx|qq|msdk)
var url = '/api/msdk/proxy/query_common_credit';
this.$axios.get(url)
.then(response => {
})
.catch(error => {
})
}
二.拦截数据的方法Mock.mock()
这里我举例最常用的格式
Mock.mock(url,data);
url用正则写，这样get请求传参时，也能拦截数据了。
Mock.mock('/\/api\/msdk\/proxy\/query_common_credit/', {
"ret":0,
"data":
{
"mtime": "@datetime",//随机生成日期时间
"score|1-800": 800,//随机生成1-800的数字
"rank|1-100": 100,//随机生成1-100的数字
"stars|1-5": 5,//随机生成1-5的数字
"nickname": "@cname",//随机生成中文名字
}
//data里的属性看不懂，需要详细看语法规范,博客链接:https://www.jianshu.com/p/4579f40e6108
});
三.设置延时请求到数据
不设置延时很有可能遇到坑，这里需要留意，因为真实的请求是需要时间的，mock不设置延时则是马上拿到数据返回，这两个情况不同可能导致在接口联调时出现问题。所以最好要先设置延时请求到数据。
//延时400s请求到数据
Mock.setup({
timeout: 400
})
//延时200-600毫秒请求到数据
Mock.setup({
timeout: '200-600'
})
四.Mock.mock()方法中定义data返回的格式
生成规则和示例：
1. 属性值是字符串 String
-
'name|min-max': string通过重复
string生成一个字符串，重复次数大于等于min，小于等于max。 -
'name|count': string通过重复
string生成一个字符串，重复次数等于count。
2. 属性值是数字 Number
-
'name|+1': number属性值自动加 1，初始值为
number。 -
'name|min-max': number生成一个大于等于
min、小于等于max的整数，属性值number只是用来确定类型。 -
'name|min-max.dmin-dmax': number生成一个浮点数，整数部分大于等于
min、小于等于max，小数部分保留dmin到dmax位。
Mock.mock({
'number1|1-100.1-10': 1,
'number2|123.1-10': 1,
'number3|123.3': 1,
'number4|123.10': 1.123
})
// =>
{
"number1": 12.92,
"number2": 123.51,
"number3": 123.777,
"number4": 123.1231091814
}
3. 属性值是布尔型 Boolean
-
'name|1': boolean随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2。
-
'name|min-max': value随机生成一个布尔值，值为
value的概率是min / (min + max)，值为!value的概率是max / (min + max)。
4. 属性值是对象 Object
-
'name|count': object从属性值
object中随机选取count个属性。 -
'name|min-max': object从属性值
object中随机选取min到max个属性。
5. 属性值是数组 Array
-
'name|1': array从属性值
array中随机选取 1 个元素，作为最终值。 -
'name|+1': array从属性值
array中顺序选取 1 个元素，作为最终值。 -
'name|min-max': array通过重复属性值
array生成一个新数组，重复次数大于等于min，小于等于max。 -
'name|count': array通过重复属性值
array生成一个新数组，重复次数为count。
6. 属性值是函数 Function
-
'name': function执行函数
function，取其返回值作为最终的属性值，函数的上下文为属性'name'所在的对象。
7. 属性值是正则表达式 RegExp
-
'name': regexp根据正则表达式
regexp反向生成可以匹配它的字符串。用于生成自定义格式的字符串。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.Random生成各种随机数据。
Mock.Random 提供的完整方法（占位符）如下：
| Type | Method |
|---|---|
| Basic | boolean, natural, integer, float, character, string, range, date, time, datetime, now |
| Image | image, dataImage |
| Color | color |
| Text | paragraph, sentence, word, title, cparagraph, csentence, cword, ctitle |
| Name | first, last, name, cfirst, clast, cname |
| Web | url, domain, email, ip, tld |
| Address | area, region |
| Helper | capitalize, upper, lower, pick, shuffle |
| Miscellaneous | guid, id |
//例子
Mock.mock(/(\/api\/)([a-z]{2,4})(\/proxy\/query_common_credit_detail)/, {
"err":0,
"data": {
boo1:"@boolean",//随机获取boolean值
img:"@image",//随机获取图片路径
name:"@name"//随机获取名字
}
});
/*打印出的数据是这样的，得到了想要的随机数据
data:{
img:"http://dummyimage.com/728x90",
name:"Betty Anderson",
boo1:false,
}*/作者：清汤饺子
链接：https://www.jianshu.com/p/f3adb1aab09e
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
