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输出观察