推荐使用 MSW（Mock Service Worker），它基于 Service Worker 拦截 fetch/XHR 请求，不侵入业务代码，支持动态启停与多环境兼容；次选 Mock.js 配合 axios 拦截器或手动 XHR 重写，但后者仅限临时调试且有兼容性限制。

在 JavaScript 开发中，Mock 是前端调试和联调阶段常用的手段，用于拦截真实网络请求、返回预设的模拟数据，避免依赖后端接口未就绪或不稳定的问题。主流方式是通过拦截 fetch 或 XMLHttpRequest，或借助专门的 Mock 工具库（如 Mock.js、msw（Mock Service Worker）、miragejs）实现。

使用 msw 拦截并替换请求（推荐，现代且健壮）

msw 是目前最主流的方案，基于 Service Worker，能真实拦截浏览器发出的 fetch 和 XHR 请求，不侵入业务代码，支持运行时动态开启/关闭，兼容开发、测试、CI 环境。

• 安装：npm install msw --save-dev
• 创建 mock handlers（例如 src/mocks/handlers.js）：

  import { rest } from 'msw';
  
  export const handlers = [
    rest.get('/api/user', (req, res, ctx) => {
      return res(
        ctx.status(200),
        ctx.json({ id: 1, name: '张三', email: 'zhangsan@example.com' })
      );
    }),
    rest.post('/api/login', (req, res, ctx) => {
      const { username } = await req.json();
      return res(
        ctx.status(200),
        ctx.json({ token: `mock-token-for-${username}` })
      );
    })
  ];

• 配置 worker（src/mocks/browser.js）：

  import { setupWorker } from 'msw';
  import { handlers } from './handlers';
  
  export const worker = setupWorker(...handlers);

• 在入口文件（如 src/index.js）中启动（仅开发环境）：

  if (process.env.NODE_ENV === 'development') {
    const { worker } = require('./mocks/browser');
    worker.start({ onUnhandledRequest: 'bypass' });
  }

用 Mock.js + 拦截 XHR（轻量、适合老项目）

Mock.js 本身不拦截请求，需配合手动重写 XMLHttpRequest 或结合 axios 的拦截器使用。适用于没有 Service Worker 支持的环境（如部分 IE 或 Electron 旧版本）。

Java注释规范Skills

当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式，或要求按照代码注释规范处理 Java 文件时，使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则，并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括：补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。

下载

• 安装：npm install mockjs
• 简单拦截示例（重写 XHR）：

  const XHR = window.XMLHttpRequest;
  window.XMLHttpRequest = function () {
    const xhr = new XHR();
  
    xhr.open = function (method, url) {
      // 匹配需要 mock 的接口
      if (url.includes('/api/user')) {
        this._mockUrl = url;
        this._mockMethod = method;
        return;
      }
      return XHR.prototype.open.apply(this, arguments);
    };
  
    xhr.send = function () {
      if (this._mockUrl) {
        setTimeout(() => {
          const Mock = require('mockjs');
          const data = Mock.mock({
            'id|1-100': 1,
            'name': '@cname',
            'email': '@email'
          });
          this.onload = () => {
            this.responseText = JSON.stringify(data);
            this.status = 200;
            this.readyState = 4;
            this.onreadystatechange();
          };
          this.onload();
        }, 300);
        return;
      }
      return XHR.prototype.send.apply(this, arguments);
    };
  
    return xhr;
  };

• ⚠️ 注意：此方式较 hack，仅建议临时调试；生产环境务必禁用。

用 axios 拦截器 + Mock.js（适合 axios 项目）

如果项目统一使用 axios，可在请求/响应拦截器中判断 URL 并返回 Mock 数据，无需改底层 XHR。

立即学习“Java免费学习笔记（深入）”；

• 示例：

  import axios from 'axios';
  import Mock from 'mockjs';
  
  // 开发环境启用 mock
  if (process.env.NODE_ENV === 'development') {
    axios.interceptors.request.use(config => {
      if (config.url.includes('/api/user')) {
        // 阻止真实请求
        config.__isMock = true;
        return Promise.resolve(config);
      }
      return config;
    });
  
    axios.interceptors.response.use(
      response => response,
      error => {
        const config = error.config;
        if (config.__isMock) {
          const data = Mock.mock({
            code: 200,
            data: { id: 1, name: '@cname', avatar: '@image(100x100)' }
          });
          return Promise.resolve({ data });
        }
        return Promise.reject(error);
      }
    );
  }

• 优点：零侵入、易维护；缺点：仅对 axios 有效，无法拦截 fetch 或原生请求。

注意事项与最佳实践

• Mock 逻辑必须严格限定在 process.env.NODE_ENV === 'development' 中，防止泄露到生产环境
• 接口路径匹配建议用正则或前缀判断，避免硬编码导致遗漏或误匹配
• Mock 数据应尽量贴近真实结构（包括字段名、嵌套层级、类型），减少后期联调返工
• 复杂场景（如登录态、分页、错误码）建议用 msw 的 context 方法（ctx.delay()、ctx.status(401)）模拟真实行为
• 团队协作时，将 mock 文件纳入 Git，并保持与后端接口文档同步更新