Mock.js使用小结
本文由 小茗同学 发表于 2017-02-23 浏览(9938)
最后修改 2017-05-22 标签:mockjs javascript

介绍

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

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