Mock学习

Mock随机数据生成，Ajax请求拦截

MockJS简介

MockJS是一款适用于前后端分离的，主要负责进行axios请求拦截与随机数据生成的JS库

MockJS定义了丰富的数据类型生成，详见MockJS

Mock安装

1	npm i mockjs -D

安装在生产环境

Mock与React的结合

通常在src目录下创建一个mock文件夹对负责生成数据的文件进行统一管理，上传代码时忽略mock文件夹

首先创建一个index.js作为入口文件

// mock/index.js

// 引入Mock
import Mock from "mockjs";

// 引入具体需要拦截的请求
import blogListMock from "./blogData.js";

// 统一展开保存到一个数组中
const mocks = [...blogListMock];

// 对于每一个接口，调用Mock.mock函数进行注册
for (const i of mocks) {
    // 接收三个参数：需要拦截的URL, 需要拦截的请求类型, 请求的响应体(支持对象和函数)
    Mock.mock(i.url, i.type, i.response);
}

随后我们可以再根据业务，分别创建这些业务的接口文件，并定义需要生成的数据形状

例如我们现在有如下需求：

请求接口得到所有博客数据数组
每条博客数据包含：
1. id
2. 作者author
  1. name
  2. avatar
3. 内容content
4. 发布时间date

与博客相关的业务暂时只有这一个接口，那么我们可以创建一个博客相关接口的文件blogData.js，然后开始编写：

import Mock from "mockjs";

const Random = Mock.Random;

const blogListMock = [
    {
        // 拦截的请求url
        url: "/api/getBlogList",
        // 请求方法
        type: "get",
        // 响应函数，可以接受参数，此处支持函数和对象
        response: (config) => {
            console.log("BlogData Mock config: ", config);
            return Mock.mock({
                message: "success",
                code: 200,
                // 名为data的包含10个元素的数组
                "data|10": [
                    {
                        // 名为id的属性，每次自增1
                        "id|+1": 1,
                        author: {
                            // 随机英文名
                            name: Random.name(),
                            // 随机图片头像
                            avatar: Random.image(),
                        },
                        // 随机段落内容，长度为15-20个单词
                        content: Random.paragraph(15, 20),
                        // 随机时间，格式为年-月-日
                        publishDate: Random.date("yyyy-MM-dd"),
                    },
                ],
            });
        },
    },
];

// 暴露给index.js
export default blogListMock;

随后在具体的逻辑页面中，我们就可以直接是用axios请求设定好的URL，以此来获得生成好的数据：

axios.get("/api/getBlogList").then((res) => {
	setBlogList(res.data.data);
}).catch((error) => {
	console.log(error);
});

如果是是用Vite进行构建，还可以设置开发环境变量：

1
2
3

// .env.development
NODE_ENV = development
REACT_APP_MOCK = true