前端其实完全可以用 Ja vaScript 把RESTful API先模拟出来。常见做法是基于本地JSON数据，配合fetch拦截，或者直接用MSW Service Worker来完成接口mock。

这样一来，CRUD操作和状态码返回都能一并模拟到位。不过要特别注意，这类方案只适合放在开发环境里使用。

做前端开发时，哪怕后端服务还没就位，也完全可以先用 Ja vaScript 把 RESTful API 接口“模拟”出来。

这样可以先把 UI 调通，也能先把业务逻辑跑顺。核心做法就是拿本地 JSON 数据充当接口响应，再结合 fetch 或 XMLHttpRequest 对请求进行拦截，然后把预先准备好的数据返回出去。

准备静态 JSON 数据

先把接口预期返回的结构写成 JS 对象或 JSON 字符串，比如用户列表：

const mockUsers = [
{ id: 1, name: "张三", email: "zhangsan@example.com" },
{ id: 2, name: "李四", email: "lisi@example.com" }
];

也可以存为 users.json 文件，放在 public 目录下。

在 Vite/React/Vue 项目中，可直接通过 URL 访问。

用 fetch 拦截并返回模拟数据

如果不改业务代码，可以重写全局 fetch，对特定路径返回 mock 响应：

// 在入口文件最前注入 mock
const originalFetch = window.fetch;
window.fetch = async (input, init) => {
if (input === '/api/users') {
return Promise.resolve({
ok: true,
status: 200,
json: () => Promise.resolve(mockUsers)
});
}
if (input === '/api/users/1') {
return Promise.resolve({
ok: true,
status: 200,
json: () => Promise.resolve(mockUsers[0])
});
}
return originalFetch(input, init);
};

注意：仅用于开发环境，上线前需移除或用条件编译控制。

用 Mock Service Worker（推荐）

更健壮的方式是使用 MSW。

它基于 Service Worker 拦截请求，支持真实 HTTP 方法、状态码、延迟等。

• 安装：npm install msw --sa ve-dev
• 定义 handlers（如 mocks/handlers.js）：

import { rest } from 'msw';
export const handlers = [
rest.get('/api/users', (req, res, ctx) => {
return res(ctx.status(200), ctx.json(mockUsers));
}),
rest.get('/api/users/:id', (req, res, ctx) => {
const id = Number(req.params.id);
const user = mockUsers.find(u => u.id === id);
return user 
 res(ctx.status(200), ctx.json(user)) 
: res(ctx.status(404));
})
];

启动 MSW 后，所有 fetch 请求都会被精准匹配并返回模拟结果。

未匹配的请求会自动透传，因此不会影响真实网络请求。

配合路由做简单 CRUD 模拟

如果还需要支持增删改，可以用内存对象模拟数据库：

• 用数组存储数据，操作时直接 push/splice/update
• POST /api/users → mockUsers.push(newItem)
• DELETE /api/users/1 → mockUsers = mockUsers.filter(u => u.id !== 1)
• 注意：修改后返回更新后的完整数据或新 ID，保持与真实 API 行为一致

这样就能在不依赖后端的情况下，完成列表展示、详情查看、表单提交等全流程联调。

《夸克》非常好用的免费AI浏览器

下载APP查看