GraphQL 是一个用于 API 构建的查询语言，它可以让前端开发者自定义 API 请求并只返回所需的数据，从而提高应用程序的效率和性能。尽管 GraphQL 在不断创新和发展，但它已经成为 Angular 应用程序中使用的流行后端技术之一。本文将介绍 GraphQL 在 Angular 中的应用，包括如何使用它来查询数据以及处理错误。
安装依赖包
在 Angular 应用程序中使用 GraphQL 需要安装两个重要的依赖包，分别是 Apollo Client 和 GraphQL。
Apollo Client 是一个强大的 GraphQL 客户端库，使得前端开发人员可以轻松地从服务端进行数据查询和处理。GraphQL 则是一个查询语言的规范，具有可读性强、灵活性高、节约网络流量等优点。
使用如下命令安装这两个依赖包：
$ npm install apollo-angular apollo-angular-http apollo-boost graphql --save
创建 GraphQL 服务
在 Angular 应用程序中，GraphQL 服务是由 Apollo Client 和一个 Angular 服务提供的。下面是一个示例代码：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ------- --- - ---- -----------------
------ - ---------- - ---- -------
------ - --- - ---- -----------------
-------------
----------- ------
--
------ ----- -------------- -
------------------- ------- ------- - -
------ ----------- --------------- -
----- ----- - ----
----- -
----- -
-----
----
-
-
--
------ --------------------------------------------------
------------ ---- -- -
------ ------------------
--
--
-
-在此代码中，我们定义了一个 Angular 服务 GraphQLService，该服务会通过调用 Apollo Client 来获取查询数据。在 getPosts 函数中，我们定义了一个查询语句来从服务端获取文章的标题和正文。在服务端返回数据之后，我们通过管道操作符 map 来将数据映射为一个可观察对象返回。
使用 GraphQL 服务
要使用上述的 GraphQLService，只需在 Angular 组件或模块中导入它即可。以下是一个使用 GraphQLService 的示例组件代码：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - -------------- - ---- ---------------------
------------
--------- ------------
------------ -------------------------
---------- --------------------------
--
------ ----- -------------- ---------- ------ -
------ ----
------------------- --------------- --------------- - -
----------- ---- -
------------------------------------------------- ---- -- -
---------- - -------
---
-
-在此代码中，我们定义了一个 Angular 组件 PostsComponent，它会通过 GraphQLService 获取文章的标题和正文。在 ngOnInit 函数中，我们调用 getPosts 函数来获取文章数据并将结果存储在 posts 变量中。
处理 GraphQL 错误
当 GraphQL 查询返回的结果中发生错误时，如何在 Angular 应用程序中进行处理？我们可以在 GraphQLService 中添加错误处理程序来处理这种情况。以下是一个示例代码：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ------- --- - ---- -----------------
------ - ----------- ---------- - ---- -------
------ - ---- ---------- - ---- -----------------
-------------
----------- ------
--
------ ----- -------------- -
------------------- ------- ------- - -
------ ----------- --------------- -
----- ----- - ----
----- -
----- -
-----
----
-
-
--
------ --------------------------------------------------
------------ ---- -- -
-- --------------- -
----- --- --------------------------------
-
------ ------------------
---
------------------ ---- -- -
------ ------------------
--
--
-
-在此代码中，我们使用 pipe 函数添加了一个管道操作符 catchError，以处理来自 query 函数的错误。在 catchError 函数中，我们使用 throwError 函数将错误重新抛出。
总结
在 Angular 应用程序中使用 GraphQL 需要安装 Apollo Client 和 GraphQL 依赖包。我们创建了一个名为 GraphQLService 的 Angular 服务，并使用 Apollo Client 来查询数据。我们还展示了如何在 Angular 中处理 GraphQL 查询错误。GraphQL 在 Angular 中的使用可以提高应用程序的效率和性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c11abd83d39b488157612a