介绍

mockjs是一个模拟后台接口的JS库，它的原理是重写了XMLHttpRequest，它可以在接口没出来时非常方便的模拟数据，上线之后不引用它即可。

官网：http://mockjs.com/
文档：https://github.com/nuysoft/Mock/wiki

基本语法

Mock.mock(template)

根据数据模板直接返回数据，以下代码可访问 http://mockjs.com/examples.html 然后打开控制台调试：

Mock.mock('@integer(60, 100)'); // 随机生成60-100的整数
Mock.mock('@cname()'); // 随机生成一个中文名，如：叶秀英
// 还可以接收一个function自定义返回内容
Mock.mock(function()
{
	return Math.floor(Math.random()*10);
})；

Mock.mock(rurl, template)

Mock.mock(rurl, template)，其中，rurl可以是一个正则，也可以是字符串。

Mock.mock(/api\/get_name/, {
	retcode: 0,
	retmsg: 'ok',
	result_rows: []
});

Mock.mock(rurl, function(options))

有时候需要根据不同的请求参数来返回不同的内容，这时候function就派上用场了，但是需要注意参数从哪里获取要根据实际情况来：

如果是GET请求，那么要从options.url里面拿，然后自己解析出来；
如果是普通的POST请求，那么要从options.body里面拿，然后自己解析类似a=1&b=2这种格式；
如果参数是JSON格式并且是POST，那么要从options.body里面拿，然后JSON.parse()再获取；
等等……

Mock.mock(/api\/get_name/, function(options)
{
	console.log(options.body);
	return {code: 0};
});
$.post('http://www.test.com/api/get_name/', {a:1}, function(resp)
{
	console.log(resp);
});

其实不用正则也没关系：

Mock.mock('app/get_name', function(options)
{
	console.log(options.body);
	return {code: 0};
});

注意事项

不支持fetch

Mockjs不支持模拟fetch API，也就是用fetch调用接口时mock不会生效。

正则千万不要加g后缀

先来看下面的例子，表面上好像没问题：

Mock.mock(/api\/get_age/g, function(options)
{
	console.log(options.body);
	return {code: 0};
});
$.post('http://www.test.com/api/get_age/', {a:1}, function(resp)
{
	console.log(resp);
});
$.post('http://www.test.com/api/get_age/', {a:1}, function(resp)
{
	console.log(resp);
});

执行一遍就会发现，第一次没问题，第二次报错，提示跨域了（也就是调了真实接口，mockjs没生效），为什么会这样呢，因为全局模式的RegExp对象有一个lastIndex属性，每次执行的结果会随着lastIndex的不同而不同，而没有g的正则是没有这个属性的，所以在使用Mockjs的时候千万不要加g。

上线之后切记删除mockjs

这个就不用细说了，必须注意。