在前后端分离开发中,有时候后台开发比较慢还没有给回接口给前端,那么这时我们可以自己模拟数据(也就是mock数据)。
当然可能你会想到我新建个js文件,把数据模拟好导出再引入请求就可以啦。这个方法虽然可以,但是接口多的时候,需要模拟的数据多的时候就很不方便了,要来回修改差异,效率很低。
现在学会使用mock.js拦截ajax请求,更加方便简洁的构造你需要的假数据。
这里提醒一下,mockjs模拟的接口地址最好不要和后端给你的一致,不然到时候你忘记把mockjs去掉的时候,请求得到的还是拦截的假数据(或者可能会出现其他请求异常问题)。
一、在React项目中使用mockjs
1、安装mockjs
npm install mockjs -D
2、在项目根目录下创建个mock文件夹
然后在mock文件夹中新建个index.js文件,里面写mock数据。
// 引入mockjs
import Mock from 'mockjs';
// 设置延时200-600毫秒请求到数据
Mock.setup({
timeout: '200-600',
});
// 可以模拟很多个接口数据,接口地址不一致即可
Mock.mock(
'/jobLssuesList/list', // 接口地址
{
code: 0,
message: '操作成功',
success: true,
// 重复属性值 array 生成一个新数组,重复次数为 5
'data|5': [
{
// 属性值自动加 1
'id|+1': 1,
// 随机生成一个布尔值,值为 true / false 的概率各为 1/2。
'isShow|1': true,
// 从属性值 array 中随机选取 1 个元素,作为最终值。
'tagName|1': ['服务', '人力', '市场'],
ipTree: 'bussissv12',
ip: '61.1.1.1',
'status|1': ['未处理', '已处理'],
// 随机生成日期时间('2020-04-14 18:00:02')
mtime: '@datetime',
// 随机生成1-800的数字
'score|1-800': 800,
// 随机生成中文名字(@是占位符,具体后面能加什么,官网有解析)
nickname: '@cname',
// 随机生成十六进制颜色值
color: '@color',
// 随机生成邮箱
email: '@email',
},
],
});
3、在项目的index.js入口文件中引入mock数据
4、在react组件中请求获取模拟的数据
可以按照请求后台接口那样进行请求即可,这里使用axios库的get请求。
// 假设这里是个Test组件
import React, { useEffect } from 'react';
import axios from 'axios';
const Test = () => {
useEffect(() => {
getDatas();
});
const getDatas = () => {
axios.get('/jobLssuesList/list')
.then((res) => {
// res.data就是我们请求到的对应url中的mock数据
console.log(res.data);
}).catch((err) => {
console.log(err);
});
};
return (
<div>
Test组件
</div>
);
};
export default Test;
打印得到的mock数据:
二、mockjs中的语法规则
1、mockjs官网
官网可以查看到所有的语法规范,遵循写法即可。上面的举例我把日常用到模拟数据的写法写出来了,简单的模拟假数据够用,具体复杂点的就看官网写。