JavaScript 中怎么在前端使用 JSON 模拟 RESTful API 接口数据-js教程-PHP中文网

前端可用javascript模拟restful api：通过本地json数据配合fetch拦截或msw service worker实现接口mock，支持crud操作与状态码模拟，仅限开发环境使用。

javascript 中怎么在前端使用 json 模拟 restful api 接口数据

在前端开发中，可以用 JavaScript 模拟 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);
};

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

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

用 Mock Service Worker（推荐）

更健壮的方式是使用 MSW，它基于 Service Worker 拦截请求，支持真实 HTTP 方法、状态码、延迟等：

安装：npm install msw --save-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 请求都会被精准匹配并返回模拟结果，且不影响真实网络请求（未匹配时自动透传）。