从 REST API 到 GraphQL：构建现代 Web 应用程序

AI 编程助手，豆包旗下的编程助手，提供智能补全、智能预测、智能问答等能力，节省开发时间，释放脑海中的创造力，支持 VSCode，点击体验 AI

随着现代 Web 应用程序的日益复杂，传统的 REST API 在满足应用程序需求方面已经变得越来越不够用了。GraphQL 是一种新的 Web API 操作语言，旨在解决 REST API 中出现的问题，例如网络请求次数、数据的过度获取和不必要的响应等。本文将介绍如何在现代 Web 应用程序中使用 GraphQL 构建 API，并与传统的 REST API 进行比较。

REST API 介绍

REST (Representational State Transfer) 是一种描述如何建立 Web 服务的架构风格，通常是使用 HTTP 协议。REST API 公开了在 Web 服务器或云中托管的资源，并允许客户端使用 GET、POST、PUT、DELETE 等 HTTP 方法来操作数据。例如，当您访问图书馆 Web 站点时，您将看到可以查看、借阅或还书的资源。这些资源是图书馆 Web 服务器上的 API，REST API 就通过 HTTP 协议与客户端进行通信。

REST API 的限制

REST API 有一些限制，这使得它们在某些方面可能不理想，尤其是在现代应用程序中。以下是几个主要的问题：

过渡的数据获取

REST API 返回整个资源，而不能让客户端查询特定的值，导致客户端在使用时会不必要地获取太多数据，从而增加了网络负担。

多个请求

在使用 REST API 时，通常需要发起多个请求以获取所有需要的资源。例如，如果您需要获取一本新书及其作者的详细信息，则需要发出两个独立的请求，这会影响性能并增加网络负担。

版本冲突

当 REST API 发生的变化使客户端无法正常工作时，可能会发生版本冲突。这会导致客户端数据丢失或应用程序崩溃。

没有强制完整性

REST API 没有足够的机制来保证客户端请求的完整性。这意味着客户端要么获取到了预期之外的数据，要么过滤了一些数据，而服务器端却不知道。

GraphQL 介绍

GraphQL 是一种由 Facebook 发明的 Web API 操作语言，它可以帮助客户端精确查询需要的数据。与 REST API 不同，GraphQL 的目标是提供一个灵活且可扩展的 API，以便客户端可以轻松地选择要获取的数据。使用 GraphQL，客户端只需要发起一次请求即可获取它所需的所有数据。

GraphQL 如何工作

GraphQL 使用了一个特定的查询语言，在客户端和服务器之间直接通信。这个查询语言允许客户端精确地查询所需的数据，而无需获取整个资源。例如，如果你需要查询一本新书和它的作者，你可以在一个请求中获取到对应的数据，如下所示：

-
  -------- ---- -
    -----
    ------ -
      ----
    -
  -
-

这个查询将包含以下信息：

  1. 客户端正在请求“book”资源
  2. 请求的特定“book” ID 是“123”
  3. 这个客户端需要“book”标题和作者名称。

GraphQL 数遍历这个查询并返回结果，结果只包含客户端查询时所需的数据。

除了查询之外，GraphQL 还包括突变（用于修改数据）和订阅（用于实时更新）等功能。

GraphQL 带来的好处

与 REST API 相比，GraphQL 有许多优点：

灵活性

GraphQL 使用一种强大的查询语言，允许客户端查询所需的精确数据，而无需获取整个资源。这使得开发人员能够构建灵活且可扩展的 API，满足大多数应用程序需求，而不仅仅是针对特定场景构建的专用 API。

性能

GraphQL 可以减少客户端流量和请求数量，从而提高性能。客户端只需要发起一次请求，请求数据可以在单个请求中获取，这就减少了网络负担和 API 响应时间。

版本控制

GraphQL 的版本化方案非常简单，通过使用不同的查询来针对不同的客户端版本，不必像 REST API 那样维护多个 API 版本。

数据完整性

GraphQL 引入了强制完整性，这可以确保客户端只请求可用的字段和参数。当不完整的查询被发现时，GraphQL 将返回一个错误消息以指导客户端。

GraphQL 示例

以下是一个简单的例子，这个例子使用一个 REST API 和同一个 GraphQL API 来获取图书和作者信息。

REST API

假设我们有一个 REST API，可以返回包含书和作者信息的 JSON 数据。

--- ----------
-
  -------- ---- ----- --------
  --------- -
    ----- ------
    ------- --- ----- ------------
    ------------ ---------- --- -----
  -
-

--- ------------
-
  ------- --- ----- ------------
  ------------ ---------- --- ------
  -------- -
    -
      ----- ------
      -------- ---- ----- -------
    -
  -
-

在这个例子中，我们可以通过两个单独的请求获取图书和作者信息，但我们需要发起两个请求。

GraphQL API

现在我们来看看相同的数据，但是这次我们将使用一个 GraphQL API 来获取数据，而不是 REST API。

我们可以构建一个 GraphQL API，该 API 可以为客户端提供所需的信息，如下所示：

----- ------- -
  -------- ------ -
    -----
    ------ -
      ----
    -
  -
-

----- --------- -
  ---------- ------ -
    ----
    ----- -
      -----
    -
  -
-

在这个例子中，我们只需要发起一个请求，就可以获取所需的图书和作者信息。我们只查询所需的数据，而不是返回整个资源，这可以减少客户端流量和请求数量，从而提高性能。

结论

REST API 和 GraphQL 都可以用于 Web 应用程序中，但它们有不同的优缺点。REST API 是一种传统且成熟的方法，使用 HTTP 协议传输数据。GraphQL 是一种新的 Web API 操作语言，可以更灵活、更精确地获取数据。

在现代 Web 应用程序中，GraphQL 的灵活性和性能使其成为更好的选择。它可以减少客户端流量和请求数量，提高性能，并且可以让客户端查询特定的值。通过使用 GraphQL，开发人员可以构建灵活、可扩展和高效的 API，满足现代应用程序的需求。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/671f2c2e2e7021665efc17d7

阅读全文

猜你喜欢

  • 如何使用 Cypress 实现表格数据自动匹配？

    随着前端技术的不断发展，自动化测试已经成为前端开发的一项重要工作。而 Cypress 是一个非常强大的自动化测试工具，它可以让我们轻松地测试应用程序中的各种功能。在这篇文章中，我们将介绍如何使用 Cy...

    12 天前
  • CSS Reset 和 Normalize.css 的使用方法和技巧

    在开发网站或应用程序时，我们经常需要在页面中使用 CSS 来控制样式。然而不同的浏览器在显示同一份代码时可能会产生不同的效果，这是因为浏览器对 HTML 和 CSS 实现的细节有所不同。

    12 天前
  • 如何解决 RESTful API 中的版本控制问题

    在开发 RESTful API 时，版本控制是一个非常重要的问题。由于 API 生态的复杂性，需要确保 API 的向后兼容性并同时提供新版本的 API。本文将介绍 RESTful API 版本控制的最...

    12 天前
  • 初学者的 Babel 插件使用指南

    初学者的 Babel 插件使用指南 随着现代 web 应用程序的不断发展，前端技术的复杂性也在不断增加。为了实现更好的性能和可维护性，越来越多的开发人员开始使用转换器将其代码转换为更稳定的语言，例如 ...

    12 天前
  • React Native 中如何使用 Redux 管理全局状态？

    对于一个 React Native 应用，全局状态的管理一直是一个不容忽视的问题。而 Redux 就是一种很好的解决方案，它将应用的状态集中管理，提高了应用的可维护性和可扩展性。

    12 天前
  • Angular + RxJS 的局限性：解决方案一次搞定

    在使用 Angular 进行前端开发时，RxJS 已经成为了不可或缺的工具。它可以极大地简化异步编程，并且提供了强大的操作符来处理数据流。但同时，我们也会遇到一些 RxJS 的一些局限性，例如无法取消...

    12 天前
  • Mocha 测试框架中如何测试 Node.js 中的 WebSocket

    前言 随着 Web 技术的飞速发展，WebSocket 已经成为一个非常重要的技术。而 Node.js 的出现，使得开发者可以方便地搭建 WebSocket 服务器。

    12 天前
  • 如何编写带有无障碍性的 JavaScript 事件

    在现代网站和应用程序中，JavaScript 事件是非常常见的。但是，对于一些身体或感官能力有障碍的用户来说，使用这些事件可能会面临一些问题。因此，为了提高用户的体验，我们需要为所有人提供具有无障碍性...

    12 天前
  • ES8 中的新特性：对象 Rest 和 Spread 操作符

    ES8 是 ECMAScript 的一个新版本，它新增了许多有用的特性，其中一个重要的特性就是对象 Rest 和 Spread 操作符。这两个操作符可以在处理对象时提供更灵活和方便的方式，让前端开发者...

    12 天前
  • Serverless 架构中的数据存储选项

    随着 Serverless 架构的快速发展，越来越多的应用程序需要使用 Serverless 技术来构建。然而，与传统应用程序不同的是， Serverless 应用程序不能使用传统的关系型数据库来存储...

    12 天前
  • 在 NodeJS 中使用 Mongoose 连接 MongoDB,解决连接失败问题

    概述 Mongoose 是 MongoDB 的一个对象模型工具，能够以非常优雅的方式工作在 Node.js 环境中。本文将会展示如何使用 Mongoose 建立 MongoDB 连接，以及如何解决连接...

    12 天前
  • 如何避免 CSS Reset 导致的按钮样式失效

    在前端开发中，CSS Reset（样式重置）是一种很常见的技术，它可以让不同浏览器在渲染页面时保持一致的样式。但是，在使用 CSS Reset 时可能会导致一些困扰，尤其是按钮样式失效的问题。

    12 天前
  • Kubernetes 中的 Pod QoS 类别

    在 Kubernetes 集群中，Pod QoS 类别用于描述 Pod 对系统资源（例如 CPU，内存等）的需求及优先级。Kubernetes 利用 QoS 类别调度 Pod，以确保高优先级 Pod ...

    12 天前
  • Sequelize 中如何使用虚拟表进行数据处理

    前言 在大多数 web 应用中，数据是不可避免的了。而 Sequelize 是 Node.js 下使用最广泛的 ORM 工具之一。 在 Sequelize 中使用虚拟表进行数据处理可以帮助我们更便捷地...

    12 天前
  • 前端无障碍问题及解决方案

    什么是无障碍？ 无障碍是指让所有用户在使用同一软件或硬件时都能够获得相同的使用体验，无论是身体上、视觉上、听觉上还是认知上存在何种差异。因此，无障碍涉及到残障人士、老年人、低视觉人群、低听力人群等用户...

    12 天前
  • 如何在 Svelte 项目中快速使用 Tailwind CSS？

    在前端开发中，CSS 是一个不可缺少的重要技术。Tailwind CSS 是一个流行的 CSS 框架，它提供了一个详细的 CSS 类库，可以帮助您快速创建样式丰富的应用程序。

    12 天前
  • 如何在 ESLint 中关闭不必要的警告

    引言 在进行前端开发时，我们经常会遇到各种代码质量问题，如语法、代码风格等。ESLint 是一个非常受欢迎的工具，它可以检查、标准化代码质量，帮助我们在开发过程中提高代码质量。

    12 天前
  • 盘点 Redux 中常见的数据流问题

    Redux 是一种非常流行的 JavaScript 应用程序状态管理工具，用于管理应用程序中的数据流，它提供了一些核心概念，包括 Actions、Reducers 和 Middleware。

    12 天前
  • Fastify 应用中错误消息的国际化与本地化

    Fastify 应用中错误消息的国际化与本地化 引言 在构建现代 Web 应用程序时，错误消息的国际化和本地化对于开发高质量的应用程序至关重要。Fastify 是一个快速的 Web 服务器框架，它提供...

    12 天前
  • 如何使用 Cypress 测试应用程序的导航栏？

    Cypress 是一款流行的前端自动化测试框架，可以轻松地测试应用程序的各种功能和交互。在本文中，我们将介绍如何使用 Cypress 对应用程序的导航栏进行测试，帮助你更好地了解 Cypress 的使...

    12 天前

相关推荐

    暂无文章