mock 生成随机数，拦截ajax请求
axios 官方文档
npm安装
npm install mockjs //安装mock
npm install axios //安装axios
mock 构造数据规则
语法规范
Mock.js 的语法规范包括两部分：
- 数据模板定义规范（Data Template Definition，DTD）
- 数据占位符定义规范（Data Placeholder Definition，DPD）
数据模板定义规范 DTD
数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：
// 属性名 name
// 生成规则 rule
// 属性值 value
'name|rule': value
注意：
-
属性名 和 生成规则 之间用竖线
|分隔。 - 生成规则 是可选的。
-
生成规则 有 7 种格式：
'name|min-max': value'name|count': value'name|min-max.dmin-dmax': value'name|min-max.dcount': value'name|count.dmin-dmax': value'name|count.dcount': value'name|+step': value
- 生成规则 的 含义 需要依赖 属性值的类型 才能确定。
-
属性值 中可以含有
@占位符。 - 属性值 还指定了最终值的初始值和类型
mock.js常用 api
Mock.mock()
Mock.mock(url, type, data) 根据数据模板生成模拟数据
url URL 字符串或 URL 正则 拦截请求的地址
type 拦截Axios类型 GET、POST
template 可以是对象或字符串 生成数据的模板
控制台验证 Mock代码示例
1111.png
var Mock = require('mockjs')
var data = Mock.mock({
// 属性 list 的值是一个数组，其中含有 1 到 10 个元素
'list|1-10': [{
// 属性 id 是一个自增数，起始值为 1，每次增 1
'id|+1': 1
}]
})
// 输出结果
console.log(JSON.stringify(data, null, 4))
测试项目实例
目录结构
3330808.png
mock-user.js
export const mockUser = {
login: {
api: '/api/mock/getUserInfo',
method: 'post',
enabled: true,
data:{
userName:'hello shadow',
nickName:'我是mock返回数据！！'
}
}
}
mock.js
import {mockUser} from './mock-user'
const mockList = [
mockUser,
// 在这个列表下面添加对应的
]
// -----这里可以添加其他mock请求配置------
const apiMockConfig = {
mocks:[],
mockEnabled:function(path){
var result = false;
this.mocks.forEach(item=>{
if (item.api == path) {
result = item.enabled;
}
});
return result;
}
};
mockList.forEach(configs=>{
Object.keys(configs).forEach(key=>{
apiMockConfig.mocks.push(configs[key]);
});
});
export default apiMockConfig;
api.js
import apiMockConfig from './mock/mock'
const axios = require('axios');
const baseUrl = "http://192.168.2.176:12306";
const Mock = require('mockjs');
apiMockConfig.mocks.forEach(config=>{
if (config.enabled) {
Mock.mock(baseUrl + config.api,config.method, ()=>{
return {
msg: 'ok',
code: '0',
success: true,
data: config.data
}
});
}
});
function createAxios(type){
let timeout = 20000; //统一的超时时间
var token = "123456789";
let applicationHeaderPayload = {
'Content-Type': 'application/json; charset=utf-8',
'token':token,
'Accept': '*/*'
}
let applicationHeader = {
'Content-Type': 'application/x-www-form-urlencoded',
'token':token,
'Accept': '*/*'
};
let args = {}; //配置参数
let axiosInstance; //请求实力
switch(type){
case "payload" :
args = {
timeout,
"headers": applicationHeaderPayload
};
break;
case "formData" :
args = {
timeout,
"headers" : applicationHeader
};
break;
default :
break;
}
axiosInstance = axios.create(args);
axiosInstance.interceptors.request.use (function (config) { //请求拦截器
console.log("baseUrl+config.url = "+baseUrl+config.url)
config.url = baseUrl+config.url;
return config;
}, function (error) {
console.log("request error")
return Promise.reject(error);
});
axiosInstance.interceptors.response.use(function (response) { //返回拦截器
console.log("response---"+JSON.stringify(response))
return handleSuccess(response);
}, function (data) {
console.log("response error--"+data)
return handleError(data);
});
return axiosInstance;
}
function handleSuccess(response){ //处理正常返回
let code = response.data.code;
console.log("handleSuccess code ---"+code)
if(code == 0){
return Promise.resolve(response.data);
}else{
return Promise.reject(response);
}
}
function handleError(response){ //处理失败返回
if (response && response.response && response.response.status==401) {
return Promise.reject(response);
}
console.error("handleError--"+response);
return Promise.reject(response);
}
//payload块
const payload = createAxios("payload");
//formdata块
const formdata = createAxios("formData");
const getUserInfo = () => {
return payload.post("/api/mock/getUserInfo");
}
//todo 请求参数
export default {
payload,
formdata,
getUserInfo,
}
vue获取接口数据
import api from "./api/apis"
mockTest() {
console.log("hello，mock测试")
api.getUserInfo().then((res) => {
console.log("获取成功---" + JSON.stringify(res))
this.userInfo = res.data
}).catch((e) => {
console.log("获取失败---" + JSON.stringify(e))
})
}
返回数据
获取成功---{"msg":"ok","code":"0","success":true,"data":{"userName":"hello shadow","nickName":"我是mock返回数据！！"}}
22220.png
