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

news2024/11/14 7:21:34

Mock.js 是一个用于模拟数据的 JavaScript 库，特别适合用于前端开发过程中生成假数据进行接口测试。它可以拦截 Ajax 请求并生成随机数据，还可以模拟服务器的响应来加速前端开发。

一、安装 `Mock.js`

可以通过以下几种方式引入 Mock.js：

CDN 引入：

<script src="https://cdn.jsdelivr.net/npm/mockjs/dist/mock.js"></script>

使用 npm：

npm install mockjs --save-dev

在项目中引入：

const Mock = require('mockjs');

ES6 模块（在支持 ES6 模块的项目中）：
```
import Mock from 'mockjs';
```

二、基本用法

1. 定义模拟数据格式

Mock.js 提供了一个 Mock.mock 方法，使用 JSON 模板来定义数据结构：

Mock.mock(url, method, data)

url：要拦截的请求 URL，支持字符串或正则表达式。
method：请求类型，比如 "get"、"post"，不区分大小写。
data：要返回的模拟数据格式。

示例：简单数据模拟

Mock.mock('/api/user', 'get', {
    'name': '@name',      // 随机生成名字
    'age|18-60': 1,       // 随机生成年龄，范围是 18 到 60
    'gender|1': ['male', 'female'], // 随机选取一个性别
});

@name 是 Mock.js 的占位符，会随机生成一个人名。
age|18-60 表示生成一个在 18 到 60 之间的随机整数。
gender|1 表示从数组中随机选取一个性别值。

当 /api/user 接口被请求时，Mock.js 会拦截这个请求并返回一个模拟的 JSON 对象，如：

{
    "name": "John Doe",
    "age": 35,
    "gender": "male"
}

三、Mock.js 数据模板语法

Mock.js 提供了丰富的数据模板语法来生成各种随机数据。以下是一些常用的占位符和规则：

1. 基础数据类型

name：随机生成一个人名（中文或英文）。
```
'name': '@name'
```
string|1-10：生成 1 到 10 个字符组成的随机字符串。
```
'string|1-10': '★'
```
boolean|1：生成随机布尔值（true 或 false）。
```
'boolean|1': true
```
number|+1：生成递增数字，从初始值开始，每次调用增加 1。
```
'id|+1': 1
```

2. 数组和对象

array|1-10：生成一个随机长度的数组。

'items|1-10': [{
    'id|+1': 1,
    'name': '@name'
}]

object|2：从对象中随机选取 2 个键值对。

'object|2': {
    "name": "@name",
    "age|20-30": 25,
    "gender|1": ["male", "female"],
    "city": "New York"
}

3. 日期和时间

date：生成随机日期，格式为 YYYY-MM-DD。
```
'date': '@date'
```
time：生成随机时间，格式为 HH:mm:ss。
```
'time': '@time'
```
datetime：生成随机日期和时间，格式为 YYYY-MM-DD HH:mm:ss。
```
'datetime': '@datetime'
```

4. 图片生成

Mock.js 还可以生成随机图片 URL，适用于生成假图片。

Mock.mock('/api/image', 'get', {
    'image': "@image('200x200', '#4A90E2', 'Hello')"
});

@image('200x200', '#4A90E2', 'Hello') 生成一个 200x200 大小的图片，背景颜色为 #4A90E2，文字为 Hello。

四、拦截 AJAX 请求示例

以下是结合 axios 请求和 Mock.js 的示例。通过 Mock.js 拦截实际请求，返回模拟的数据：

import axios from 'axios';
import Mock from 'mockjs';

// 定义 Mock 数据
Mock.mock('/api/data', 'get', {
    'id|+1': 1,
    'title': '@title',
    'author': '@name',
    'content': '@paragraph',
    'publishDate': '@date'
});

// 发起请求，测试 Mock.js 返回的数据
axios.get('/api/data')
    .then(response => {
        console.log(response.data);
    })
    .catch(error => {
        console.error('Error:', error);
    });

每次调用时，/api/data 请求都会返回一个 JSON 对象，模拟一篇随机生成的文章信息。

五、正则匹配 URL

Mock.js 支持使用正则表达式匹配 URL，非常适合有动态参数的 API 请求。例如，匹配 /api/user/123 的请求：

Mock.mock(/\/api\/user\/\d+/, 'get', {
    'id': '@id',
    'name': '@name',
    'age|20-30': 1
});

此正则表达式 /\/api\/user\/\d+/ 会匹配 /api/user/ 后接任意数字的请求。

六、延迟响应

在真实环境中，网络请求通常会有延迟，可以用 Mock.setup 模拟响应时间：

Mock.setup({
    timeout: '300-800' // 300 到 800 毫秒之间的延迟
});

设置后，所有 Mock.js 拦截的请求都会随机延迟 300 至 800 毫秒后返回数据。

七、综合示例：模拟分页数据

以下是一个使用 Mock.js 模拟分页数据的示例：

Mock.mock(/\/api\/users\?page=\d+&pageSize=\d+/, 'get', (options) => {
    const url = new URL(`http://localhost${options.url}`);
    const page = parseInt(url.searchParams.get("page"));
    const pageSize = parseInt(url.searchParams.get("pageSize"));

    return Mock.mock({
        'total': 100,
        [`users|${pageSize}`]: [{
            'id|+1': (page - 1) * pageSize + 1,
            'name': '@name',
            'age|18-60': 1,
            'gender|1': ['male', 'female']
        }]
    });
});