在现代前端开发中，REST API 已经成为了日常开发中不可缺少的工具。但是，在 REST API 的基础上，GraphQL 的出现不仅提供了一种不同的 API 设计方式，而且能够解决 REST API 在面对复杂应用场景中所面临的一些挑战。本文将对 GraphQL 和 REST 进行比较和分析，以帮助前端开发人员更好地选择适合自己项目的 API 设计方案。
1.概述
REST API
REST , 即 Representational State Transfer ，是一种基于 HTTP 协议的全新 API 设计风格。它通过统一标准的 HTTP 方法和状态码，将 API 抽象为资源，通过 URL 进行唯一识别，支持多种数据格式（ JSON 、 XML ），具有简单易用，可 缓存 、可互操作等优势，已成为 Web 开发的标准之一。
GraphQL
GraphQL 是 Facebook 开源的一种新的 API，旨在改善 REST 的一些限制。它是一种用于应用程序的数据查询语言和运行时环境。GraphQL让客户端能够明确请求其需要的数据，而无需从服务端返回多余的数据。它还支持嵌套查询和高级类型检查，是一种强类型的 API 式样，并提供了更多的灵活性，从而可以更好地解决移动应用上的问题。
2.优势比较
2.1 灵活性
GraphQL 允许客户端明确请求所需的数据，当你需要更新某个字段的时候，你只需要更新这个字段即可，而不是整个对象。这样子能够减少浪费的数据量和提高查询效率，对于移动设备上的带宽和性能来说是十分重要的。
-- -------------------- ---- -------
----- -
--------- ---
-----
----------
---- -
----
---
-
-
-REST API 风格下的请求则比较简单，但是请求所返回的格式是固定的，响应一旦设计就不太会改变，例如获取电影的标题,评分，演员等信息：
-- -------------------- ---- -------
--- --------
-
-------- ---- -------
------------- ---
------- -
------- ---- -------
------ ---- ----- -- -- -------- ----- --- ---------- -- -- ----- --- --- ----- -- ---- - ------ -- ----- ---- --------- -- -------- ------- ----- ------ --- ------ --- ----- ---- ----- --- -- ----- ----- ------- --------- --- ------ --- -------
-
-2.2 网络请求
GraphQL 能够查询到所有需要的数据并只需要服务器端执行一次的请求，这一点对于通过网络进行数据传输的移动应用程序和低带宽环境非常有用。
REST 风格的应用程序通常需要多次请求，因为只能在给定的 URL 上执行特定的操作。因此，如果需要获取多个对象的数据，需要向多个 URL 发出请求。
2.3 性能
GraphQL 具有更好的性能，因为每个请求的结果都是 API 中的所有请求的子集。每个请求只返回所 需要的数据，这减少了请求所带的数据量，更好地支持低带宽环境。
REST API 风格下的 API 文档通常旨在为一个接口提供所有必需的数据，但这也会导致每个请求都返回画册中的所有内容，这会导致额外的数据量，浪费网络和服务器的解析资源和时间。
2.4 API 文档和自动补全
GraphQL 有一套明显的类型规范，并依据这些规范为应用程序生成可视化 API 文档和类型有效性验证。这导致了更完整和准确的缺陷，在客户端 API 调用时有很好的提示和描述信息。
REST 风格的 API 不拥有标准的文档层。API 是通过使用资源包装成或直接映射到操作进行说明的。
3.选择
虽然 GraphQL 比 REST 更有优势，但是并不意味着全部使用 GraphQL 是最好的选择。下面是关于在哪种场景下使用什么 API 风格的建议：
使用 GraphQL 的情况：
数据结构非常复杂或难以表示成惯用的 JSON 格式的 API。
需要更多的查询灵活性，可以只得到所需的数据和应用程序的 "低带宽" 环境。
在同一网络请求中请求多个资源的属性。
通常是场景比较复杂的应用程序。
使用 REST API 的情况：
对于单个资源的操作很简单，能够很好地表示为 HTTP 谓词。
当需要 JSON 之外的数据格式时。
当需要遵守给定的标准（例如 Atom）时。
对于具有简单查询的应用程序。
4.示例代码
4.1 GraphQL 示例代码
4.1.1 开发环境搭建
假设你已经安装完 Node.js 8 和 npm ，那么就可以使用 npx 来初始化一个 GraphQL 项目的开始了。下面使用的是 GraphQL Yoga，它使得在 Node.js 中开发 GraphQL API 更容易。
npx create-graphql-server
根据提示进行输入安装即可完成环境配置。完成后，在 package.json 中找到 scripts 字段，添加如下代码：
"dev": "nodemon src/index.js --exec babel-node"
这样子当执行 npm run dev 指令时，Yoga 就会启动我们的服务。
4.1.2 编写 API
-- -------------------- ---- -------
------ - ------------- - ---- ---------------
----- -------- - -
---- ----- -
----------- -------- -------
-
--
----- --------- - -
------ -
------ --- - ---- -- -- -
------ ------ ------ -- ----------
-
-
--
----- ------ - --- --------------- --------- --------- ---
--------------- -- ------------------- -- ------- -- ------------------上面的代码中我们通过创建类型定义 schema 和解析模板 resolvers 其中有 1 个 Query ，并有一个命名为 hello （带参数 name ）的可查询字段。解析模板的实现返回传递的名称参数，或者如果没有收到参数,则返回字符串"Hello World"。
query {
hello(name:"John")
}以上这段 GraphQL 查询会返回 "Hello John"。
4.2 REST 示例代码
4.2.1 安装 Express
表面上看起来REST风格的代码比GraphQL复杂很多，实际上很简单。首先我们需要安装一个Node.js的 web 框架Express：
npm i express --save
4.2.2 编写 API
创建一个文件名为index.js的文件，并将下面的代码复制到其中：
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
----- ---- - ---------------- -- -----
---------------- -- --
------------------- --- --------- -- ---------------------------
--
----- ------ - -
- --- -- ------ ---- ------- ----------- -- --
-
--- --
------ -------- ------
----------- --
--
-
--- --
------ ---- ---- ------
----------- --
--
-
--- --
------ -------- ------
----------- --
-
--
------------------ ----- ---- -- -
-----------------
---
---------------------- ----- ---- -- -
----- ------- - ------------------------
----- ----- - ----------------- -- -------- --- ---------
-- ------- -
----------------
- ---- -
--------------------
-
---
------------------- ----- ---- -- -
------------- --------------
---
---------------------- ----- ---- -- -
------------- --------------
---
------------------------- ----- ---- -- -
------------- --------------
---
我们定义了一组REST风格的API，总共有四个HTTP方法：
- GET /movies: 返回所有电影数据
- GET /movies/:id: 返回指定ID的电影数据
- POST /movies: 创建新电影，未实现
- PUT /movies/:id: 更新指定ID的电影，未实现
- DELETE /movies/:id: 删除指定ID的电影，未实现
5.总结
GraphQL 和 REST 都是可行的 API 设计方案，最终选择哪一种取决于你的具体情况和需求。GraphQL 很适合非常复杂的应用程序，例如大型电子商务平台，社交媒体和游戏，它能够提供更好的性能和更加灵活的查询。而对于简单的数据结构和操作，REST API 会容易一些。
希望本文能够给予读者一些帮助，可以更高效的选择适合自己项目的 API 设计方案，提高了开发效率和应用程序性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64758813968c7c53b029053f