在开发过程中，有很多的ajax请求，前后端分离开发你肯定遇到这样的问题，后台给你的接口文档，你需要在本地模拟数据返回，可能你也用到过我之前用的蠢方法，就是新建一个test.json文件，放入接口文档中写的返回示例，这么做有个很大的问题是不够灵活，而且还需要切换url，现在学会使用mock.js拦截ajax请求，更加方便的构造你需要的假数据。
补充一个大神的链接：https://www.cnblogs.com/jasonwang2y60/p/7302449.html （vue+mockjs，实现前后端分离开发）
一.简单示例
在这里我举的例子是在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': /wWsSdD/, '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, }*/