前端使用mockjs模拟接口数据

在前后端分离开发中，有时候后台开发比较慢还没有给回接口给前端，那么这时我们可以自己模拟数据（也就是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官网

官网可以查看到所有的语法规范，遵循写法即可。上面的举例我把日常用到模拟数据的写法写出来了，简单的模拟假数据够用，具体复杂点的就看官网写。