木灵鱼儿
阅读:2532
最后更新: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对象来进行请求参数返回
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

相关推荐
mock 快速入门
基本概念问题的起源:前后端分离在前后端开发的时候,前端的数据基本都是通过api请求获取到的,但是后端可能在开发的时间上与前端不一致,这就导致前端常常需要等待后端提供接口,等待会耗去很多开发时间,所以我们经常做的方式就是自己模拟数据(假数据时代)。比如写个定时器返回一个数据对象,或者使用一个json文件,去模拟请求。但是这些其实都并不方便,每次都要自己去写一堆数据,如果是json格式还不能for循环,以及一些随机数据,最重要的是这些代码最终都得删除,因为耦合在业务代码中,而且我们的请求并不是真正的请求代码,最终在后端接口出来后我们还得改一遍代码。难道就不能前端模拟的效果和真实请求一样,后端...

周易测算网
FireFox Windows 10谢谢分享,日常打卡~ 滴滴~[tv_白眼]