在 React 中使用 json-server 发起 Fetch 请求和 POST 请求（从入门到真实应用指南）

Source: Dev.to

当你开始构建真实的 React 应用时，迟早会需要 数据——这就意味着要与 API 打交道。
如果后端还没有准备好，json-server 就是救星。

在本指南中，你将学习如何：

• 在本地模拟 REST API
• 使用 React 中的 fetch GET 数据
• POST 数据（创建新记录）
• 避免常见的新手错误
• 应用 SEO 友好的最佳实践

什么是 json-server？

json-server 是一个小工具，它可以将一个简单的 db.json 文件转换为 完整的假 REST API。
你不需要 Node 后端知识或数据库——只需 JSON。

安装

npm install -g json-server

或作为开发依赖：

npm install json-server --save-dev

第一步 — 创建 db.json 文件

{
  "cities": [
    { "id": 1, "name": "London" },
    { "id": 2, "name": "Paris" }
  ]
}

第2步 — 启动假服务器

json-server --watch db.json --port 8000

服务器现在提供：

• GET /cities
• POST /cities
• DELETE /cities/:id
• PUT /cities/:id

就像真实的后端一样。

在 React 中发起 GET 请求

获取数据通常在 useEffect 中进行。

基本模式

useEffect(() => {
  async function fetchData() {
    const response = await fetch("URL_HERE");
    const data = await response.json();
    console.log(data);
  }

  fetchData();
}, []);

为什么使用 useEffect？

React 组件会频繁重新渲染。你希望在组件挂载时 只 获取一次数据，而不是在每次渲染时都请求。

处理加载状态（重要）

setIsLoading(true);
// fetch logic
setIsLoading(false);

显示加载 UI 可以提升用户体验，并防止页面闪烁。

在 React 中发起 POST 请求

POST 用于创建新数据。

简洁的 POST 示例

fetch("URL_HERE", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    id: 2,
    name: "John",
    lastName: "Doe",
  }),
})
  .then((response) => response.json())
  .then((data) => console.log(data));

这里发生了什么？

常见初学者错误

1. 忘记 Content-Type

服务器在没有正确的头部时无法理解你的负载。

2. 未使用 JSON.stringify

对象在发送前必须转换为字符串。

3. 没有加载状态

没有反馈时 UI 会让人感到困惑。

4. 没有错误处理

始终在 fetch 调用中使用 try / catch（或处理 .catch）。

实际最佳实践

• 为每个请求显示 加载 UI。
• 为了可读性，优先使用 async/await。
• 优雅地处理错误 并通知用户。
• 将 API URL 保存在 配置文件 中；绝不要在代码库中硬编码它们。

为什么 json-server 对 React 学习者完美

• 即时后端，零配置。
• 不需要数据库。
• 帮助你理解 CRUD 操作。
• 为作品集项目提升信心。

最终思考

使用 json-server 弥合了 学习 React 与 构建真实应用 之间的鸿沟。
它将你的思维方式从“跟随教程”转变为像 与 API 交互的前端工程师 那样思考。

掌握使用假服务器进行 GET 和 POST，使向真实后端的过渡 提升 10 倍，将简单的 React 演示转化为可用于生产的技能。