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

news/2024/11/14 12:35:10 标签: javascript, 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

    在项目中引入：

    javascript">const Mock = require('mockjs');

  3. ES6 模块（在支持 ES6 模块的项目中）：

    javascript">import Mock from 'mockjs';

二、基本用法

1. 定义模拟数据格式

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

javascript">Mock.mock(url, method, data)
  • url：要拦截的请求 URL，支持字符串或正则表达式。
  • method：请求类型，比如 "get"、"post"，不区分大小写。
  • data：要返回的模拟数据格式。
示例：简单数据模拟
javascript">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：随机生成一个人名（中文或英文）。

    javascript">'name': '@name'

  • string|1-10：生成 1 到 10 个字符组成的随机字符串。

    javascript">'string|1-10': '★'

  • boolean|1：生成随机布尔值（true 或 false）。

    javascript">'boolean|1': true

  • number|+1：生成递增数字，从初始值开始，每次调用增加 1。

    javascript">'id|+1': 1
2. 数组和对象

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

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

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

    javascript">'object|2': {
    "name": "@name",
    "age|20-30": 25,
    "gender|1": ["male", "female"],
    "city": "New York"
}
3. 日期和时间

  • date：生成随机日期，格式为 YYYY-MM-DD。

    javascript">'date': '@date'

  • time：生成随机时间，格式为 HH:mm:ss。

    javascript">'time': '@time'

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

    javascript">'datetime': '@datetime'
4. 图片生成

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

javascript">Mock.mock('/api/image', 'get', {
    'image': "@image('200x200', '#4A90E2', 'Hello')"
});
  • @image('200x200', '#4A90E2', 'Hello') 生成一个 200x200 大小的图片，背景颜色为 #4A90E2，文字为 Hello。

四、拦截 AJAX 请求示例

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

javascript">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 的请求：

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

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

六、延迟响应

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

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

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

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

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

javascript">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 数据接口来测试前端页面。


http://www.niftyadmin.cn/n/5751907.html

相关文章

ESP-IDF运行export.sh时遇到“${ZSH_VERSION}“附近有错误

ESP-IDF运行export.sh时遇到“${ZSH_VERSION}“附近有错误

在Ubuntu18.04环境下。 一开始我以为是有这个变量没值&#xff0c;于是我下载之后配置。发现不行。 以为是从主机到虚拟机有隐藏字符&#xff0c;删掉重打&#xff1b;以为有语法问题&#xff0c;手动赋值、改内容。 结果&#xff0c;是因为我是直接下载的GitHub zip导致的&…
阅读更多...
小程序服务商常见问题

小程序服务商常见问题

1: 服务器域名和开发域名都不带https前缀, 业务域名每个都需要校验文件 2: 手机开了调试可以请求, 关闭调试无法请求, 体验版接口请求不同 答: 服务商还需要通过接口给小程序设置业务域名; 但不需要校验文件; 注意: 体验版通过快速配置小程序服务器域名接口会不生效, 用普通的 …
阅读更多...
❤React-JSX语法认识和使用

❤React-JSX语法认识和使用

1、JSX基本使用​ JSX是React的核心 JSX是ES的扩展 jsx语法 -> 普通的JavaScript代码 -> babel React可以使用JSX的前提和原因&#xff1a; React生态系统支持&#xff1a; 脚手架通常用于构建React应用程序&#xff0c;而JSX是React框架的核心语法之一。因此&#xf…
阅读更多...
新的服务器Centos7.6 安装基础的环境配置(新服务器可直接粘贴使用配置)

新的服务器Centos7.6 安装基础的环境配置(新服务器可直接粘贴使用配置)

常见的基础服务器配置之Centos命令 正常来说都是安装一个docker基本上很多问题都可以解决了&#xff0c;我基本上都是通过docker去管理一些容器如&#xff1a;mysql、redis、mongoDB等之类的镜像&#xff0c;还有一些中间件如kafka。下面就安装一个 docker 和 nginx 的相关配置…
阅读更多...
FU-PEG-OH可以作为一种有效的稳定剂和连接剂，提高纳米颗粒的稳定性和功能性

FU-PEG-OH可以作为一种有效的稳定剂和连接剂，提高纳米颗粒的稳定性和功能性

一、基本信息 英文名称&#xff1a;FU-PEG-OH&#xff0c;Furan-PEG-OH&#xff0c;Furan-PEG-Hydroxyl 中文名称&#xff1a;羟基PEG呋喃 纯度&#xff1a;95&#xff05; 供应商&#xff1a;西安凯新生物科技 分子量&#xff1a;0.4k、0.6k、1k、2k、3.4k、5k、10k、20k…
阅读更多...
Spring-boot 后端java配置接口返回jsp页面

Spring-boot 后端java配置接口返回jsp页面

Spring-boot 后端java配置接口返回jsp页面 spring boot 基于spring MVC的基础上进行了改进&#xff0c; 将Controller 与ResponseBody 进行了合并成一个新的注解 RestController。 当用户请求时&#xff0c;需要有视图渲染的&#xff0c;与请求数据的请求分别使用 1.在appli…
阅读更多...
宏景人力资源信息管理系统 uploadLogo 任意文件上传漏洞复现

宏景人力资源信息管理系统 uploadLogo 任意文件上传漏洞复现

0x01 产品描述&#xff1a; ‌宏景人力资源信息管理系统‌&#xff08;HJ-eHR&#xff09;是一款全面覆盖人力资源管理各模块的软件&#xff0c;旨在帮助企事业单位构建高绩效组织&#xff0c;推动组织健康成长&#xff0c;提升组织软实力。该系统适用于复杂单组织或多组织客户…
阅读更多...
轻松上手：使用Docker部署Java服务

轻松上手：使用Docker部署Java服务

文章目录 1. 什么是Docker&#xff1f;2. 为什么使用Docker部署Java服务&#xff1f;3. 如何使用Docker部署Java服务&#xff1f;步骤1&#xff1a;创建Dockerfile步骤2&#xff1a;构建Docker镜像步骤3&#xff1a;运行Docker容器 4. 注意事项5. 结语推荐阅读文章 在当今的云计…
阅读更多...
最新文章

Copyright @ 2022~2023