基于 JavaScript 的 API：REST、GraphQL、gRPC——2025 年该如何选择？

集成的三大支柱：JavaScript 世界中的 REST、GraphQL 和 gRPC

如今的 JavaScript 开发，就是一场永无止境的数据交换。您的应用可能正在拉取汇率、提交表单、流式传输视频或实时同步文档。而每一次，您都需要选择您的客户端将如何与服务器通信。

长期以来，REST 一直是标准。它像锤子一样简单。但对于复杂的项目，一把锤子是不够的——您需要一把瑞士军刀（GraphQL）甚至一把破拆锤（gRPC）。

在本文中，我们将剖析在 JavaScript 中使用 API 的三种主要方法。您将看到真实的代码示例，了解每种协议的优缺点，并能够为您的下一个项目做出明智的选择。开始吧！

REST API：永不消亡的经典

REST（表述性状态转移） 是一种架构风格，而非协议。大多数开发者理解的 REST 是对资源进行的 HTTP 请求（GET /users, POST /orders）。

JavaScript 中的 REST 请求示例

最流行的方法是使用原生的 fetch 或 axios 库。这是一个典型的 GET 请求：

// 获取用户列表\nconst getUsers = async () => {\n  const response = await fetch('https://api.example.com/users');\n  if (!response.ok) {\n    throw new Error(`HTTP error! status: ${response.status}`);\n  }\n  const data = await response.json();\n  return data;\n};\n\n// 使用示例\ntry {\n  const users = await getUsers();\n  console.log(users);\n} catch (error) {\n  console.error('加载用户时出错：', error);\n}\n

REST 对 JavaScript 开发者的优势

\n
• 简单且可预测。 GET、POST、PUT、DELETE——每个动词都有明确的含义。
\n
• 缓存。 HTTP 缓存开箱即用，可加速重复请求。
\n
• 广泛支持。 任何语言编写的后端都能提供 REST 接口。
\n
• 工具丰富。 Postman、Swagger、Insomnia——拥有庞大的测试生态系统。
\n

REST 的主要缺点

\n
• 过度获取（数据冗余）。 您请求 /users，但服务器返回所有字段，包括密码（当然是哈希值）和内部 ID，而您只需要姓名和邮箱。
\n
• 获取不足（数据缺失）。 要获取一个用户及其最近的订单，需要发起两次请求：/users/1 和 /users/1/orders。
\n
• 端点众多。 复杂的业务逻辑会产生数十个难以维护的 URL。
\n

\n

何时选择 REST？非常适合简单的 CRUD 应用、公共 API 以及注重简单性和缓存的项目。

\n

GraphQL：只请求你需要的内容

GraphQL 是一种查询语言和运行时环境，由 Facebook（现 Meta）创建。它使用单个端点替代多个端点，客户端自行决定获取哪些字段。

用 JavaScript 编写 GraphQL 查询

在客户端使用 GraphQL，最常用的是 @apollo/client 或 urql 库。但也可以通过 fetch 直接实现：

// 通过 fetch 发送 GraphQL 查询\nconst query = `\n  query {\n    user(id: "123") {\n      name\n      email\n      posts {\n        title\n        createdAt\n      }\n    }\n  }\n`;\n\nconst fetchUserWithPosts = async () => {\n  const response = await fetch('https://api.example.com/graphql', {\n    method: 'POST',\n    headers: { 'Content-Type': 'application/json' },\n    body: JSON.stringify({ query })\n  });\n  const result = await response.json();\n  return result.data;\n};\n\n// 调用\nfetchUserWithPosts().then(data => console.log(data));\n

看到区别了吗