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

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

一、安装 Mock.js

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

1. CDN 引入：

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

2. 使用 npm：

   npm install mockjs --save-dev

   在项目中引入：

   const Mock = require('mockjs');

3. 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']
        }]
    });
});

• 这个 Mock 拦截 /api/users?page=1&pageSize=10 形式的请求，返回 pageSize 条随机用户数据。
• 每次请求会返回 10 条用户数据和 total 总数值为 100，可以模拟分页查询效果。

---

总结

• 定义数据结构：通过 JSON 模板定义结构，并使用占位符生成随机数据。
• 拦截请求 ：通过 Mock.mock 拦截指定的 URL 请求。
• 自定义生成规则：通过 Mock.js 的占位符生成丰富的数据类型，包括字符串、数值、数组、日期、图片等。
• 模拟延迟 ：使用 Mock.setup 模拟网络延迟。

这样，就能用 Mock.js 高效创建模拟 API 数据接口来测试前端页面。