MockJS根据参数返回不同的数据
有时候我们需要让mock的数据也要根据参数动态变化。
如果你还不知道怎么在vue中使用mockjs,请看这篇文章
Vue使用MockJS,从此不再等后端
简单改造
原来的代码可能是这样的:
Mock.mock(baseURL + '/tab_data', 'get', {
status: 'SUCCEED',
result: {
'area_count|100000-800000': 1000,
'population_count|500000-1000000': 100000,
'police_count|100-1000': 1000,
'police_situation_count|100-1000': 1000,
}
})
现在的代码是这样的:
//用来获取参数的方法
function getQueryString(url,name) {
let urlObj = new URL(url)
let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
let r = urlObj.search.substr(1).match(reg);
if(r!=null)return unescape(r[2]); return null;
}
Mock.mock(RegExp(baseURL + '/tab_data'+'.*'), 'get', (options)=>{
let id = getQueryString(options.url,id)//id是我们要获取的参数,然后根据id处理下数据再返回即可,这里没有处理直接返回了。
return Mock.mock({
status: 'SUCCEED',
result: {
'area_count|100000-800000': 1000,
'population_count|500000-1000000': 100000,
'police_count|100-1000': 1000,
'police_situation_count|100-1000': 1000,
}
})
})
结语
GET是在url结尾获取参数的,POST是在options.body中获取参数,可以尝试吧options输出观察
本文系作者 @迦娜王 原创发布在 松鼠乐园。未经许可,禁止转载。