为什么需要Mock API
前后端分离开发模式下，最常见的问题是：前端开发完了，后端接口还没准备好；或者后端接口准备好了，但返回的数据不够真实，无法覆盖各种边界情况。
我在2024年带一个10人团队做一个电商项目，前后端并行开发。没有Mock API的时候，前端同学只能写死数据，等后端接口好了再联调，经常出现字段不匹配、数据格式错误的问题。引入Mock API后，联调时间从平均3天缩短到半天，效率提升非常明显。
主流免费Mock API服务对比
#
1. JSONPlaceholder
最经典的Mock API服务，适合快速原型验证。
优点：
- 零配置，开箱即用
- 支持RESTful标准操作（GET/POST/PUT/DELETE）
- 数据格式规范，适合学习
缺点：
- 数据是固定的，无法自定义
- 不支持复杂查询参数
- 没有数据持久化
适用场景： 学习REST API、快速原型验证、前端组件开发
#
2. Mocky
可以自定义响应的Mock服务，灵活性很高。
优点：
- 完全自定义响应内容
- 支持延迟模拟（测试loading状态）
- 支持HTTP状态码模拟（测试错误处理）
缺点：
- 需要手动配置每个接口
- 没有数据库持久化
- 免费版有调用次数限制
适用场景： 自定义响应测试、错误场景模拟、延迟测试
#
3. MockAPI（推荐）
功能最完整的免费Mock服务，支持自定义数据和CRUD操作。
优点：
- 可视化数据管理界面
- 支持数据持久化（像真实数据库）
- 支持关系型数据（外键关联）
- 支持筛选、排序、分页
- 免费版支持3个项目，每个项目无限资源
缺点：
- 需要注册账号
- 国内访问偶尔不稳定
适用场景： 完整项目开发、需要数据持久化的测试、复杂业务逻辑验证
实战：用MockAPI搭建电商测试环境
下面是一个完整的电商项目Mock API搭建过程。
#
第一步：创建项目和资源
1. 访问 mockapi.io 注册账号
2. 创建新项目 "ecommerce-demo"
3. 添加以下资源（Resources）：
- products（商品）
- users（用户）
- orders（订单）
- categories（分类）
#
第二步：定义数据结构
products 结构：
{
"id": "1",
"name": "iPhone 15 Pro",
"price": 7999,
"categoryId": "1",
"stock": 100,
"description": "最新款iPhone，搭载A17芯片",
"image": "https://example.com/iphone15.jpg",
"createdAt": "2024-01-15T08:00:00Z"
}
users 结构：
{
"id": "1",
"name": "张三",
"email": "[email protected]",
"avatar": "https://example.com/avatar1.jpg",
"address": "北京市朝阳区xxx街道",
"phone": "13800138000"
}
orders 结构：
{
"id": "1",
"userId": "1",
"productId": "1",
"quantity": 2,
"totalPrice": 15998,
"status": "pending",
"createdAt": "2024-06-01T10:30:00Z"
}
#第三步：前端接入代码
const API_BASE = 'https://your-project.mockapi.io';
// 封装请求函数
async function mockApiRequest(endpoint, options = {}) {
const url = API_BASE + endpoint;
const response = await fetch(url, {
headers: {
'Content-Type': 'application/json',
},
...options,
});
if (!response.ok) {
throw new Error("HTTP error! status: " + response.status);
}
return response.json();
}
// 商品相关API
const ProductAPI = {
// 获取商品列表（支持分页和筛选）
getList: (page = 1, limit = 10, categoryId = null) => {
let url = "/products?page=" + page + "&limit=" + limit;
if (categoryId) url += "&categoryId=" + categoryId;
return mockApiRequest(url);
},
// 获取单个商品详情
getById: (id) => mockApiRequest("/products/" + id),
// 创建商品
create: (data) => mockApiRequest('/products', {
method: 'POST',
body: JSON.stringify(data),
}),
// 更新商品
update: (id, data) => mockApiRequest("/products/" + id, {
method: 'PUT',
body: JSON.stringify(data),
}),
// 删除商品
delete: (id) => mockApiRequest("/products/" + id, {
method: 'DELETE',
}),
};
// 订单相关API
const OrderAPI = {
// 创建订单
create: (orderData) => mockApiRequest('/orders', {
method: 'POST',
body: JSON.stringify({
...orderData,
createdAt: new Date().toISOString(),
status: 'pending',
}),
}),
// 获取用户订单列表
getByUser: (userId) => mockApiRequest("/orders?userId=" + userId),
// 更新订单状态
updateStatus: (orderId, status) => mockApiRequest("/orders/" + orderId, {
method: 'PUT',
body: JSON.stringify({ status }),
}),
};
// 使用示例
async function demo() {
try {
// 获取商品列表
const products = await ProductAPI.getList(1, 5);
console.log('商品列表:', products);
// 创建订单
const order = await OrderAPI.create({
userId: '1',
productId: products[0].id,
quantity: 2,
totalPrice: products[0].price * 2,
});
console.log('创建订单成功:', order);
// 查询用户订单
const userOrders = await OrderAPI.getByUser('1');
console.log('用户订单:', userOrders);
} catch (error) {
console.error('API调用失败:', error);
}
}
demo();
实战：生成逼真测试数据
手动创建测试数据很麻烦，而且不真实。下面是用Faker库自动生成逼真数据的方法。
#Python版本
from faker import Faker
import random
import json
fake = Faker('zh_CN') # 中文数据
def generate_user():
"""生成用户数据"""
return {
"name": fake.name(),
"email": fake.email(),
"phone": fake.phone_number(),
"avatar": f"https://api.dicebear.com/7.x/avataaars/svg?seed={random.randint(1, 1000)}",
"address": fake.address(),
"createdAt": fake.iso8601()
}
def generate_product(category_id):
"""生成商品数据"""
product_names = [
"无线蓝牙耳机", "智能手表", "机械键盘", "4K显示器", "移动电源",
"USB-C扩展坞", "降噪耳机", "平板电脑支架", "蓝牙音箱", "智能台灯"
]
return {
"name": random.choice(product_names) + " " + fake.word(),
"price": round(random.uniform(29.9, 999.9), 2),
"categoryId": category_id,
"stock": random.randint(0, 500),
"description": fake.text(max_nb_chars=100),
"image": f"https://picsum.photos/400/300?random={random.randint(1, 1000)}",
"rating": round(random.uniform(3.5, 5.0), 1),
"reviewCount": random.randint(10, 1000),
"createdAt": fake.iso8601()
}
def generate_order(user_id, product_id):
"""生成订单数据"""
statuses = ["pending", "paid", "shipped", "delivered", "cancelled"]
return {
"userId": user_id,
"productId": product_id,
"quantity": random.randint(1, 5),
"totalPrice": round(random.uniform(50, 2000), 2),
"status": random.choice(statuses),
"createdAt": fake.iso8601(),
"shippingAddress": fake.address()
}
# 批量生成数据
users = [generate_user() for _ in range(10)]
products = [generate_product(str(random.randint(1, 5))) for _ in range(50)]
orders = [generate_order(str(random.randint(1, 10)), str(random.randint(1, 50))) for _ in range(100)]
print(f"生成 {len(users)} 个用户")
print(f"生成 {len(products)} 个商品")
print(f"生成 {len(orders)} 个订单")
# 导出为JSON文件
with open('mock_data.json', 'w', encoding='utf-8') as f:
json.dump({
"users": users,
"products": products,
"orders": orders
}, f, ensure_ascii=False, indent=2)
print("数据已保存到 mock_data.json")
#JavaScript版本（Node.js）
const { faker } = require('@faker-js/faker/locale/zh_CN');
function generateUsers(count = 10) {
return Array.from({ length: count }, (_, i) => ({
id: String(i + 1),
name: faker.person.fullName(),
email: faker.internet.email(),
phone: faker.phone.number(),
avatar: faker.image.avatar(),
address: faker.location.streetAddress(true),
createdAt: faker.date.past().toISOString(),
}));
}
function generateProducts(count = 50) {
const categories = ['电子产品', '服装', '食品', '家居', '图书'];
return Array.from({ length: count }, (_, i) => ({
id: String(i + 1),
name: faker.commerce.productName(),
price: parseFloat(faker.commerce.price({ min: 10, max: 1000 })),
category: faker.helpers.arrayElement(categories),
stock: faker.number.int({ min: 0, max: 500 }),
description: faker.commerce.productDescription(),
image: faker.image.urlPicsumPhotos({ width: 400, height: 300 }),
rating: faker.number.float({ min: 3.5, max: 5, precision: 0.1 }),
createdAt: faker.date.past().toISOString(),
}));
}
function generateOrders(users, products, count = 100) {
return Array.from({ length: count }, (_, i) => {
const user = faker.helpers.arrayElement(users);
const product = faker.helpers.arrayElement(products);
const quantity = faker.number.int({ min: 1, max: 5 });
return {
id: String(i + 1),
userId: user.id,
productId: product.id,
quantity,
totalPrice: parseFloat((product.price * quantity).toFixed(2)),
status: faker.helpers.arrayElement(['pending', 'paid', 'shipped', 'delivered']),
createdAt: faker.date.recent().toISOString(),
};
});
}
// 生成数据
const users = generateUsers(20);
const products = generateProducts(100);
const orders = generateOrders(users, products, 200);
console.log("生成 " + users.length + " 个用户");
console.log("生成 " + products.length + " 个商品");
console.log("生成 " + orders.length + " 个订单");
// 导出
const fs = require('fs');
fs.writeFileSync('mock_data.json', JSON.stringify({ users, products, orders }, null, 2));
console.log('数据已保存到 mock_data.json');
Mock API最佳实践
#1. 环境分离
// config.js
const ENV = process.env.NODE_ENV || 'development';
const API_CONFIG = {
development: {
baseURL: 'https://your-project.mockapi.io',
timeout: 5000,
},
testing: {
baseURL: 'https://your-project.mockapi.io',
timeout: 10000,
},
production: {
baseURL: 'https://api.yourdomain.com',
timeout: 10000,
},
};
export const config = API_CONFIG[ENV];
#2. 请求拦截器（模拟延迟和错误）
// 模拟网络延迟
function mockDelay(ms = 500) {
return new Promise(resolve => setTimeout(resolve, ms));
}
// 模拟随机错误（用于测试错误处理）
function mockRandomError(errorRate = 0.1) {
if (Math.random() < errorRate) {
throw new Error('模拟网络错误');
}
}
async function enhancedRequest(url, options = {}) {
// 添加延迟
await mockDelay(300 + Math.random() * 700); // 300-1000ms延迟
// 随机错误（10%概率）
mockRandomError(0.1);
return fetch(url, options);
}
#3. 数据同步脚本
当后端接口准备好后，你需要把Mock数据迁移到真实数据库：
import requests
import json
# 从MockAPI导出数据
def export_from_mock(mock_base_url, resource):
response = requests.get(f"{mock_base_url}/{resource}")
return response.json()
# 导入到真实后端
def import_to_backend(backend_url, resource, data):
for item in data:
response = requests.post(
f"{backend_url}/{resource}",
json=item,
headers={'Content-Type': 'application/json'}
)
if response.status_code != 201:
print(f"导入失败: {item.get('id', 'unknown')}")
# 执行迁移
mock_url = "https://your-project.mockapi.io"
backend_url = "https://api.yourdomain.com"
resources = ['users', 'products', 'orders']
for resource in resources:
data = export_from_mock(mock_url, resource)
print(f"导出 {len(data)} 条 {resource} 数据")
import_to_backend(backend_url, resource, data)
print(f"导入完成: {resource}")
总结
Mock API是前后端分离开发中不可或缺的工具。JSONPlaceholder适合学习和原型，Mocky适合自定义测试场景，MockAPI适合完整项目开发。
关键建议：
1. 尽早引入Mock API。 不要等到前后端联调时才发现接口不匹配的问题。
2. 保持Mock数据的真实性。 用Faker生成逼真数据，不要用"test1"、"test2"这种假数据。
3. 做好环境配置。 开发用Mock，测试用Mock，生产用真实API，切换要方便。
4. 定期同步数据。 当后端接口变化时，及时更新Mock数据，保持一致性。
所有文中提到的Mock API服务都可以在 Free API Hub 上找到详细的使用文档和示例代码。建议根据项目需求选择最适合的工具。