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 请求参数方式有多种情况(不知道的可以访问下面链接)，后续取值略有不同，相信你应该知道怎么做的。
