JavaScript 中怎么使用 Mock 拦截并替换网络请求接口返回数据-js教程-PHP中文网

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

javascript 中怎么使用 mock 拦截并替换网络请求接口返回数据

在 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。

示例：

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);
    }
  );
}