React项目Axios开发环境HTTP请求Mock方案优化咨询

针对你当前逐个判断请求路径导致代码杂乱、Mock逻辑与主代码耦合的问题，推荐以下几种清晰易维护、且不会混入生产代码的解决方案：

方案1：独立Mock配置文件+动态引入 #

把所有Mock规则集中到单独文件，通过环境变量判断是否加载，主应用代码完全不涉及Mock逻辑。

步骤： #

1. 创建单独的Mock配置文件 src/mocks/axiosMocks.js：

import axios from 'axios';

// 用对象映射管理所有Mock规则，支持静态数据或动态生成
const mockRules = {
  '/api/data': { data: 'mock data' },
  '/api/user': { data: { id: 1, name: 'Test User' } },
  '/api/list': (request) => {
    // 根据请求参数动态生成返回值
    const page = request.params.page || 1;
    return { data: Array(5).fill().map((_, i) => ({ id: (page-1)*5 + i, text: `Item ${i}` })) };
  }
};

axios.interceptors.request.use(request => {
  const handler = mockRules[request.url];
  if (handler) {
    const mockResponse = typeof handler === 'function' ? handler(request) : handler;
    return Promise.resolve(mockResponse);
  }
  return request;
});

2. 在项目主入口文件（如src/index.js）中仅在开发环境引入该文件：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

// 开发环境才加载Mock配置，生产环境会被打包工具Tree-Shaking忽略
if (process.env.NODE_ENV === 'development') {
  require('./mocks/axiosMocks');
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

方案2：基于Axios实例分离Mock逻辑 #

创建统一的Axios实例，在实例中仅开发环境添加Mock拦截器，业务代码直接导入实例即可，无需关心Mock逻辑。

步骤： #

1. 创建Axios实例文件 src/utils/axiosInstance.js：

import axios from 'axios';

// 创建基础Axios实例
const axiosInstance = axios.create({
  baseURL: process.env.REACT_APP_API_BASE_URL,
  // 其他全局配置（超时、请求头等）
});

// 仅开发环境添加Mock拦截器
if (process.env.NODE_ENV === 'development') {
  const mockRules = {
    '/api/data': { data: 'mock data' },
    '/api/user': { data: { id: 1, name: 'Test User' } }
  };

  axiosInstance.interceptors.request.use(request => {
    const mockData = mockRules[request.url];
    if (mockData) {
      return Promise.resolve(mockData);
    }
    return request;
  });
}

export default axiosInstance;

2. 业务代码中直接导入该实例发起请求：

// 业务组件中
import axiosInstance from '../utils/axiosInstance';

const fetchData = async () => {
  const res = await axiosInstance.get('/api/data');
  console.log(res.data);
};

方案3：使用Mock Service Worker（MSW）实现完全解耦 #

MSW在浏览器/Node的Service Worker层面拦截请求，Mock逻辑完全独立于应用代码，生产环境不会加载任何Mock相关代码，适合复杂项目。

步骤： #

1. 安装开发依赖：

npm install msw --save-dev

2. 创建Mock服务文件 src/mocks/server.js：

import { setupServer } from 'msw/node';
import { rest } from 'msw';

// 定义所有请求的Mock处理规则
const handlers = [
  rest.get('/api/data', (req, res, ctx) => {
    return res(ctx.json({ data: 'mock data' }));
  }),
  rest.post('/api/user', (req, res, ctx) => {
    // 模拟创建用户的返回结果
    return res(ctx.status(201), ctx.json({ id: Date.now(), name: req.body.name }));
  })
];

export const server = setupServer(...handlers);

3. 在主入口文件中启动Mock服务（仅开发环境）：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

if (process.env.NODE_ENV === 'development') {
  const { server } = require('./mocks/server');
  server.listen({ onUnhandledRequest: 'bypass' }); // 未匹配的请求放行到真实API
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

方案对比 #

• 方案1：轻量无额外依赖，适合小型项目，Mock规则集中易维护。
• 方案2：与Axios实例绑定，适合已有统一请求封装的项目，逻辑简洁。
• 方案3：完全解耦应用与Mock逻辑，支持REST/GraphQL，模拟真实请求场景（状态码、请求参数处理等），适合中大型长期维护的项目。

内容的提问来源于stack exchange，提问作者Ben Hurley