JS Mock（Mock 拦截请求的前提、Mock 使用、关闭 Mock）

我命由我123452026-09-03 8:43

一、Mock 拦截请求的前提

Mock 拦截请求不要求后端真实接口存在
Mock 拦截请求的前提是浏览器确实发出了这个网络请求，如果浏览器没有发起请求，Mock 根本不会触发

二、Mock 使用

安装 Mock

shell 复制代码

npm install mockjs

在 src/main.js 文件中引入 Mock

js 复制代码

import "@/mock/mockServer.js";

静态数据模拟 Mock.mock(url, response)

js 复制代码

import Mock from "mockjs";

import login from "./data/login.json";

Mock.mock("/mock/login", { code: 200, data: login });

动态数据模拟 Mock.mock(url, method, function)

js 复制代码

import Mock from "mockjs";

Mock.mock("/api/login", "post", (options) => {
	// options 包含请求信息
	console.log("请求体：", options.body);

	// 解析请求参数
	const { username, password } = JSON.parse(options.body);

	// 根据参数动态返回
	if (username === "admin" && password === "123456") {
		return {
			code: 200,
			message: "登录成功",
			data: {
				token: "mock-token-" + Date.now(),
				username: "admin",
				role: "管理员",
			},
		};
	} else {
		return {
			code: 401,
			message: "用户名或密码错误",
			data: null,
		};
	}
});

三、关闭 Mock

最简单的方式，在 src/main.js 文件中，注释掉如下内容

js 复制代码

// import "@/mock/mockServer.js";