mock.js 前端虚拟api数据

创建一个mock.js文件用于设置虚拟数据接口

//mock
import Mock from "mockjs";
Mock.setup({
  timeout: '300-500'
});
/行业数据扩展
Mock.Random.extend({
  industry(min, max) {
    const data = ["financial", "bes", "it", "agriculture", "estate", "medical"];
    let arr = [];
    if (min && max) {//随机范围
      const ranNum = Math.floor(Math.random() * (max - min)) + min;
      for (let i = 0; i < ranNum; i++) {
        arr.push(this.pick(data));
      }
      return arr;
    } else if (min) { //必须多少
      for (let i = 0; i < min; i++) {
        arr.push(this.pick(data));
      }
      return arr;
    }
    // 默认一个
    const str = this.pick(data);
    arr.push(str);
    return arr;
  }
});



const Random = Mock.Random;
//下载文档数据
Mock.mock('http://www.baidu.com/api/datadown', res => {
  let list = [];
  for (let i = 0; i < 10; i++) {
    let listobj = {
      id: Random.id(),
      title: Random.datetime('yyyy') + Random.ctitle(5, 10),
      uptime: Random.datetime('yyyy-MM-dd'),
      link: "/word/下载测试文档.docx"
    }
    list.push(listobj);
  }
  return list;
});

main文件引入

//mock
require("./mock");

mock会自动拦截axios的请求，然后模拟数据返回，axios就像正常一样使用即可。

拦截带参数的get请求

get请求的参数是在url地址上的，所以这个不好固定地址段，只能用正则来进行匹配。

mock支持地址参数为正则

Mock.mock(/http:\/\/www\.baidu\.com\/api\/datadown(.*?), res => {

})

这样写就能匹配到get参数，如果你对匹配的地址有更精准的要求，可以自己调整正则

获取到get参数

参数在url地址段上，我们需要手动转换

Mock.mock(/http:\/\/www\.baidu\.com\/api\/datadown(.*?), res => {
  //拿到get参数
  let params = {};
  if (res.url.indexOf("?") !== -1) {
    let getArr = res.url.split('?')[1].split('&');
    getArr.forEach(item => {
      const kv = item.split("=");
      params[kv[0]] = kv[1];
    });
  }
})

这样params对象就是get的参数键值对了，然后我们判断这个params对象来进行请求参数返回