mock.js使用 mock获取get、post请求参数
在开发过程中,有很多的ajax请求,前后端分离开发你肯定遇到这样的问题,后台给你的接口文档,你需要在本地模拟数据返回,可能你也用到过我之前用的蠢方法,就是新建一个test.json文件,放入接口文档中写的返回示例,这么做有个很大的问题是不够灵活,而且还需要切换url,现在学会使用mock.js拦截ajax请求,更加方便的构造你需要的假数据。
简单示例
在这里我举的例子是在vue项目中如何使用mock.js。
-
安装mockjs
npm install mockjs --save-dev
-
在项目中创建mock文件目录(用于拦截本地请求,使用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.cnblogs.com/jiaoshou/p/14162834.html });
-
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.cnblogs.com/jiaoshou/p/14162834.html
});
设置延时请求到数据
不设置延时很有可能遇到坑,这里需要留意,因为真实的请求是需要时间的,mock不设置延时则是马上拿到数据返回,这两个情况不同可能导致在接口联调时出现问题。所以最好要先设置延时请求到数据。
//延时400s请求到数据
Mock.setup({
timeout: 400
})
//延时200-600毫秒请求到数据
Mock.setup({
timeout: '200-600'
})
mock获取get、post请求参数
GET 请求获取参数
get
请求如果带参数,请把接口url写为正则匹配,否则匹配不到就报错(Mock.mock(RegExp(API_URL.LOGIN + ".*")
)
// get 普通匹配:只能匹配到 ${process.env.VUE_APP_API_BASE_URL}/api_admin/table ,这个路径,由于get请求参数是拼接在url后面的,所以这个是匹配不到的,这时我们需要改写成正则匹配
Mock.mock(`${process.env.VUE_APP_API_BASE_URL}/api_admin/table`, 'get', (options) => {
let result = {};
return result;
});
// get 正则匹配:这样get请求,带不带参数就都可以获取到了
Mock.mock(RegExp(`${process.env.VUE_APP_API_BASE_URL}/api_admin/table` + ".*"), 'get', (options) => {
let result = {};
// 这样就可以获取到带参数的完整地址了,自己还需要再写个方法提取参数,网上有很多,mock没有内置
// http://localhost:3333/api_admin/table?userName=admin&passWord=8888889
console.log('mock', options.url);
return result;
});
// get 扩展,如果你每次写正则觉得麻烦,可以提到一个方法里,每天调用即可
/**
* 将url改写成正则模式,mock匹配get请求路由时候使用,因为get请求参数是拼接在url后面,不用正则匹配不到
* @param {String} url
* @returns {RegExp}
*/
function regUrl(url) {
return RegExp(url + ".*");
}
Mock.mock(regUrl(`${process.env.VUE_APP_API_BASE_URL}/api_admin/table`), 'get', (options) => {
let result = {};
// 这样就可以获取到带参数的完整地址了,自己还需要再写个方法提取参数,网上有很多,mock没有内置
// http://localhost:3333/api_admin/table?userName=admin&passWord=8888889
console.log('mock', options.url);
return result;
});
POST 请求获取参数
post
请求获取参数,一般普通匹配就满足了,但是极少数会在路径拼接参数,这里就用正则匹配举例
// post 获取参数,一般普通匹配就满足了,但是极少数会在路径拼接参数,这里就用正则匹配举例
Mock.mock(regUrl(`${process.env.VUE_APP_API_BASE_URL}/api_admin/table`), 'post', (options) => {
let result = {};
// options.body 就是post参数
console.log('mock', options.body);
return result;
});
options.body
拿到这个其实就是获取到了参数,由于 post
请求参数方式有多种情况(不知道的可以访问下面链接),后续取值略有不同,相信你应该知道怎么做的。