JavaScript 项目中 Mock 模拟怎么拦截网络请求-js教程-PHP中文网

mock拦截网络请求的核心思路是在请求发出前用假数据替代真实响应。推荐使用msw在浏览器层拦截fetch/xhr，也可用axios拦截器做轻量mock，或sinon在单元测试中模拟xhr。

javascript 项目中 mock 模拟怎么拦截网络请求

在 JavaScript 项目中，Mock 拦截网络请求的核心思路是：**在请求真正发出前，用假数据替代真实响应**。不依赖后端、不发真实 HTTP 请求，就能让前端逻辑正常跑通。关键在于“拦截时机”和“替换方式”。

用 Mock Service Worker（MSW）拦截最推荐

MSW 是目前主流且健壮的方案，它基于 Service Worker，在浏览器层拦截 fetch/XHR 请求，对代码零侵入。

安装：npm install msw --save-dev

创建 mock handlers（如 src/mocks/handlers.js）：

import { rest } from 'msw';

export const handlers = [
  rest.get('/api/users', (req, res, ctx) => {
    return res(
      ctx.status(200),
      ctx.json([{ id: 1, name: '张三' }, { id: 2, name: '李四' }])
    );
  }),
];

在测试或开发环境启动 worker（如 src/mocks/browser.js）：

import { setupWorker } from 'msw';
import { handlers } from './handlers';

export const worker = setupWorker(...handlers);

在入口文件（如 index.js）中启用（仅开发/测试）：
```
if (process.env.NODE_ENV === 'development') {
  worker.start();
}
```

用 axios 拦截器做轻量 Mock（适合简单场景）

如果你项目统一用 axios，且不想引入 Service Worker，可在请求发出前动态返回 mock 数据。

js2java

JavaScript 到 Java 全栈翻译助手，专为前端开发者学习 Java 或快速实现后端业务逻辑而设计。当用户提到以下场景时必须使用此技能： - "帮我把这段 JS 代码转成 Java" - "用 Java 怎么写这个逻辑" - "我习惯用 JS 写，想翻译成 Java" - "教我 Java，我要写后端接...

下载

定义 mock 映射表（URL → 响应）：

const mockData = {
  '/api/posts': { data: [{ id: 1, title: '测试文章' }] },
  '/api/login': { data: { token: 'mock-token-123' } }
};

添加请求拦截器（开发环境启用）：

axios.interceptors.request.use(config => {
  if (process.env.NODE_ENV === 'development' && mockData[config.url]) {
    // 阻止真实请求，直接 resolve mock 数据
    return Promise.resolve({
      data: mockData[config.url].data,
      status: 200,
      statusText: 'OK',
      config,
      headers: {}
    });
  }
  return config;
});

⚠️ 注意：这种方式无法拦截原生 fetch 或 XMLHttpRequest，只适用于 axios 场景。

用 Sinon + Fake Server 做单元测试 Mock

在 Jest 或 Mocha 单元测试中，常用 Sinon 模拟 XHR 行为，适合验证组件/函数逻辑。

安装：npm install sinon --save-dev

在测试中使用：

import sinon from 'sinon';

describe('UserList', () => {
  let server;

  beforeEach(() => {
    server = sinon.createFakeServer();
    server.autoRespond = true;
    server.respondWith('GET', '/api/users', [
      200,
      { 'Content-Type': 'application/json' },
      JSON.stringify([{ id: 1, name: '王五' }])
    ]);
  });

  afterEach(() => server.restore());

  it('renders users', async () => {
    render(<userlist></userlist>);
    await waitFor(() => screen.getByText('王五'));
  });
});

注意绕过 Mock 的常见情况

Mock 失效往往不是配置问题，而是请求没被正确捕获：

跨域请求未配置 CORS：MSW 要求目标域名与当前页面同源，或后端允许跨域（开发时可配 proxy）
请求 URL 不一致：比如 mock 了 /api/users，但代码发的是 /api/users/（末尾斜杠）或带 query 参数，需匹配完整路径或用正则
Service Worker 未注册成功：检查控制台是否有 “MSW: failed to register Service Worker”，确认页面是 http://localhost 或 https（HTTP localhost 才支持 SW）
生产环境误启 Mock：务必用环境变量包裹启动逻辑，避免上线后返回假数据