当前位置：首页 > React

react 如何使用 mock

2026-03-31 10:55:25React

使用 Mock 数据在 React 中

在 React 项目中，Mock 数据常用于模拟后端 API 返回的数据，方便前端开发与测试。以下是几种常见的方法：

使用 `json-server` 创建 Mock API

安装 json-server 作为开发依赖：

npm install json-server --save-dev

创建一个 db.json 文件，用于存储 Mock 数据：

{
  "users": [
    { "id": 1, "name": "John Doe" },
    { "id": 2, "name": "Jane Smith" }
  ]
}

启动 json-server：

json-server --watch db.json --port 3001

在 React 组件中调用 Mock API：

fetch('http://localhost:3001/users')
  .then(response => response.json())
  .then(data => console.log(data));

使用 `msw` (Mock Service Worker)

安装 msw：

npm install msw --save-dev

创建 Mock 处理器（通常在 src/mocks/handlers.js）：

import { rest } from 'msw';

export const handlers = [
  rest.get('/users', (req, res, ctx) => {
    return res(
      ctx.json([
        { id: 1, name: 'John Doe' },
        { id: 2, name: 'Jane Smith' }
      ])
    );
  })
];

设置 Mock 服务（在 src/mocks/browser.js）：

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

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

在应用入口文件（如 src/index.js）中启用 Mock：

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

直接在组件中使用 Mock 数据

对于简单的场景，可以直接在组件中定义 Mock 数据：

const mockUsers = [
  { id: 1, name: 'John Doe' },
  { id: 2, name: 'Jane Smith' }
];

function UserList() {
  const [users, setUsers] = useState(mockUsers);
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

结合 Axios 拦截器

如果使用 Axios，可以通过拦截器返回 Mock 数据：

react 如何使用 mock

import axios from 'axios';

axios.interceptors.request.use(config => {
  if (config.url === '/users') {
    return Promise.resolve({
      data: [
        { id: 1, name: 'John Doe' },
        { id: 2, name: 'Jane Smith' }
      ]
    });
  }
  return config;
});

选择哪种方法取决于项目需求和复杂度。json-server 适合需要完整模拟 REST API 的场景，msw 提供了更灵活的拦截能力，而直接定义 Mock 数据则适用于简单用例。