木灵鱼儿

木灵鱼儿

阅读:1138

最后更新:2020/09/28/ 14:17:23

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对象来进行请求参数返回

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 0
文章被阅读 1138

相关文章