一、前端为什么需要独立的Mock数据层
React项目开发中，前后端并行是常态。如果组件开发必须等后端接口就绪，进度会严重受制。独立Mock数据层让前端可以先行定义数据结构和交互逻辑，后端联调时只需要替换请求地址。
早期做法是把JSON文件放在public目录，通过相对路径直接fetch。这种方式适用于极简演示，但一旦涉及POST、PUT、DELETE或分页参数、筛选条件，静态文件就无能为力。JSON Server则把数据文件变成完整的REST API，支持常见HTTP动词和查询参数。
Faker.js则负责数据内容本身。它提供姓名、地址、邮箱、日期、图片URL、UUID等大量生成器，可以快速产生结构稳定但内容随机的数据，让列表页、详情页、图表页都能获得接近真实效果的数据。
二、快速搭建JSON Server与Faker.js数据生成脚本
在项目根目录执行终端命令安装依赖。推荐使用 @faker-js/faker 作为Faker库的最新版本，当前仍然兼容CommonJS导入方式，方便在Node脚本中直接运行。
npm install -D json-server @faker-js/faker
接下来创建一个数据生成脚本，例如 mock/generate.js。脚本中先生成若干条用户数据，每条数据包含id、姓名、邮箱、头像和创建时间，最后导出一个对象。json-server启动时会读取这个模块的导出结果，把每个字段作为独立资源路径。
const { faker } = require('@faker-js/faker');
const users = [];
for (let i = 0; i < 30; i++) {
users.push({
id: i + 1,
name: faker.person.fullName(),
email: faker.internet.email(),
avatar: faker.image.avatar(),
createdAt: faker.date.past(),
});
}
module.exports = { users };
然后在package.json的scripts中添加一条命令：json-server mock/generate.js --port 3001。运行这条命令后，终端会显示可用的资源地址，例如 http://localhost:3001/users。此时浏览器直接访问该地址就能看到随机生成的用户列表。
三、在React组件中接入Mock数据并处理异步状态
React函数组件中通常使用useEffect发起请求，并配合useState保存数据、加载状态和错误信息。为了避免组件卸载后仍然调用setState产生告警，建议使用AbortController取消请求。
import { useEffect, useState } from 'react';
function UserList() {
const [users, setUsers] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
const controller = new AbortController();
fetch('http://localhost:3001/users', { signal: controller.signal })
.then((res) => {
if (!res.ok) throw new Error('请求失败');
return res.json();
})
.then((data) => setUsers(data))
.catch((err) => {
if (err.name !== 'AbortError') setError(err.message);
})
.finally(() => setLoading(false));
return () => controller.abort();
}, []);
if (loading) return <p>加载中...</p>;
if (error) return <p>出错了：{error}</p>;
return (
<ul>
{users.map((user) => (
<li key={user.id}>{user.name} - {user.email}</li>
))}
</ul>
);
}
export default UserList;
这个示例把加载、错误和正常展示三种状态都显式处理，保证Mock接口异常时页面不会直接崩溃。当数据请求成功后，列表会展示用户姓名和邮箱，视觉效果与真实接口返回几乎没有差别。
四、管理Mock数据的几个实用技巧
JSON Server支持丰富的查询参数，能模拟真实后端的分页和筛选。例如 _page 与 _limit 组合实现分页，_sort 与 _order 指定排序字段和方向，q 参数进行全文搜索。React中拼接这些参数时要注意地址字符串中的&符号需要正确书写。
const page = 2;
fetch(`http://localhost:3001/users?_page=${page}&_limit=10`)
.then((res) => res.json())
.then((data) => setUsers(data));
当数据需要刷新时，可以重新运行生成脚本，或者使用json-server的 --watch 参数监听数据文件变化。如果想把Mock服务与真实后端切换做得更平滑，可以在React项目中通过环境变量管理基础地址。开发环境使用本地Mock地址，生产环境指向真实API，改动一处即可完成切换。
const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001';
fetch(`${API_BASE}/users`)
.then((res) => res.json())
.then((data) => setUsers(data));
这套方案让Mock数据不再是临时拼凑的静态文件，而是具备完整REST语义和随机数据能力的轻量接口层。随着项目复杂度提升，还可以进一步抽象请求函数、统一错误处理，使前后端联调时只需关注数据契约本身。
React Mock数据JSON ServerFaker.js修改时间：2026-08-24 02:17:34