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 会拦截这个请求