前端数据 Mock 与 API 模拟方案深度对比

在前后端分离的开发模式中，Mock 数据是前端独立开发的关键。chance、faker、json-server 和 mockjs 是四种常见的解决方案，但它们的工作层级完全不同。有些生成数据，有些模拟服务器，有些拦截网络。让我们从架构角度深入对比。

⚠️ 维护状态与风险提示

这是选择库之前最重要的考量因素。使用已弃用的库会给项目带来长期风险。

chance 保持活跃维护。

• 轻量级，社区稳定。
• 适合长期项目的基础数据生成。

// chance: 稳定维护
import Chance from 'chance';
const chance = new Chance();
console.log(chance.name());

faker 原包已官方弃用。

• 原作者停止维护，存在安全风险。
• 社区已迁移至 @faker-js/faker。

// faker: 已弃用（请勿在新项目使用）
import { faker } from 'faker';
console.log(faker.name.firstName());
// 建议迁移至：import { faker } from '@faker-js/faker';

json-server 处于维护模式。

• 功能稳定，但新特性更新缓慢。
• 适合原型开发，生产环境需替换。

# json-server: 维护模式
npx json-server --watch db.json

mockjs 更新频率较低。

• 在中国社区广泛使用，但核心机制较旧。
• 对现代网络 API 支持有限。

// mockjs: 更新缓慢
import Mock from 'mockjs';
Mock.mock('/api/data', { name: '@name' });

🎲 数据生成能力：简单随机 vs 逼真伪造

数据生成的逼真度直接影响测试的有效性。

chance 提供基础随机类型。

• 擅长生成数字、布尔值、简单字符串。
• 配置项少，上手快。

// chance: 基础随机
const chance = new Chance();
const user = {
  id: chance.integer({ min: 1, max: 100 }),
  active: chance.bool()
};

faker 提供高度逼真的业务数据。

• 支持姓名、地址、金融、图片等复杂字段。
• 数据看起来像真实的，适合 UI 演示。

// faker: 逼真数据
import { faker } from '@faker-js/faker';
const user = {
  id: faker.datatype.number(),
  email: faker.internet.email()
};

json-server 不生成数据，只存储数据。

• 你需要预先准备好 JSON 文件。
• 适合固定数据集的 CRUD 测试。

// json-server: 静态数据文件 (db.json)
{
  "users": [
    { "id": 1, "name": "Alice" }
  ]
}

mockjs 内置模板语法生成数据。

• 使用 @name 等占位符在模板中生成。
• 结合拦截器直接返回生成后的数据。

// mockjs: 模板生成
import Mock from 'mockjs';
const data = Mock.mock({
  'name': '@cname',
  'age': '@integer(18, 60)'
});

🌐 API 模拟机制：独立服务 vs 请求拦截

这是架构决策中最关键的区别：是运行一个真实服务器，还是在浏览器内拦截？

chance 不涉及 API 模拟。

• 纯逻辑库，运行在内存中。
• 需要手动将数据填入组件或状态。

// chance: 无网络模拟
const data = chance.name();
// 手动赋值给 state
setState({ name: data });

faker 不涉及 API 模拟。

• 纯逻辑库，运行在内存中。
• 通常配合 MSW 或手动 fetch 模拟使用。

// faker: 无网络模拟
const data = faker.internet.email();
// 需配合其他工具模拟网络请求

json-server 运行独立的 Node.js 服务。

• 启动一个真实的 HTTP 服务器。
• 浏览器发起真实网络请求，走完整链路。

# json-server: 独立服务
# 终端运行服务，浏览器访问 http://localhost:3000/users
npx json-server --watch db.json --port 3000

mockjs 在浏览器内拦截 XHR。

• 重写 XMLHttpRequest 对象。
• 请求不会发出到服务器，直接在本地返回。

// mockjs: 拦截请求
Mock.mock('/api/user', 'get', { name: 'Tom' });
// 发起请求时会被拦截，不会到达网络
fetch('/api/user'); 

🔌 现代网络兼容性：XHR vs Fetch

随着 Fetch API 的普及，旧式拦截技术面临挑战。

chance 与网络无关。

• 不受网络库影响。
• 兼容所有环境。

// chance: 完全兼容
// 无网络依赖，无兼容性问题
const val = chance.pick(['a', 'b']);

faker 与网络无关。

• 不受网络库影响。
• 兼容所有环境。

// faker: 完全兼容
// 无网络依赖，无兼容性问题
const val = faker.lorem.word();

json-server 支持所有网络协议。

• 因为是真实服务器，客户端用什么都行。
• 完美支持 Fetch、Axios、XHR。

// json-server: 完美支持 Fetch
fetch('http://localhost:3000/users')
  .then(res => res.json());

mockjs 主要支持 XHR，Fetch 支持有限。

• 核心基于重写 XHR。
• 使用 Fetch 可能需要额外配置或不生效。

// mockjs: Fetch 兼容性问题
// 旧版 Mock 可能无法拦截 fetch 请求
fetch('/api/data'); // 可能直接穿透到真实服务器

🛠️ 集成与开发体验

工具如何融入你的构建流程也很重要。

chance 作为依赖导入。

• 按需引入，打包进项目。
• 增加少量 bundle 体积。

// chance: 打包引入
import Chance from 'chance';
// 随项目代码一起构建

faker 作为依赖导入。

• 体积较大，建议按需引入。
• 随项目代码一起构建。

// faker: 按需引入
import { faker } from '@faker-js/faker';
// 注意包体积影响

json-server 作为开发脚本运行。

• 不打包进项目，独立进程。
• 需要额外终端窗口或 npm script。

// json-server: package.json 脚本
{
  "scripts": {
    "mock": "json-server --watch db.json"
  }
}

mockjs 作为依赖导入或 webpack 插件。

• 通常在入口文件全局引入。
• 生产环境需配置忽略。

// mockjs: 全局引入
import './mock'; // 引入即生效
// 生产环境需通过 webpack 配置排除

📊 核心特性对比表

💡 架构师建议

chance 适合轻量级场景 🪶 — 当你只需要简单的随机数或布尔值来测试逻辑分支时，它是最佳选择。它不会给项目带来负担。

faker (推荐 @faker-js/faker) 适合 UI 开发 🎨 — 当你需要向客户演示或测试 UI 布局时，逼真的数据能让界面看起来更真实。但务必使用社区维护版本。

json-server 适合前后端联调 🤝 — 当后端接口未就绪，但前端需要测试完整的 HTTP 交互（包括状态码、延迟、CRUD）时，它能提供最快的模拟服务。

mockjs 适合旧项目维护 🏗️ — 如果现有项目已经深度依赖 mockjs 且使用 XHR，迁移成本过高，可以继续使用。但在新项目中，建议考虑 MSW (Mock Service Worker) 等更现代的方案。

最终思考：没有最好的工具，只有最适合场景的工具。对于现代新项目，推荐组合使用 @faker-js/faker 生成数据，配合 MSW 或 json-server 进行网络模拟，以避开 mockjs 的技术债务和 faker 的维护风险。