在现代的 Web 应用程序开发中，与后端 API 进行数据交换非常常见。对于 Angular 开发人员来说，使用 RxJS 可以轻松地进行 AJAX 调用。本文将介绍如何使用 RxJS 操作符和 Angular HttpClient 发出 AJAX 请求，从服务器获取数据。
RxJS 概述
RxJS 是一个 JavaScript 库，它允许使用可观察对象来组合异步和基于事件的程序。一个可观察对象代表了一个值或一系列值的推送集合，这些值可能在未来的某个时间点、以异步方式到达。 RxJS 用于管理此类型的异步数据流，并使应用程序的开发更可预测、更可维护。
Angular HttpClient
Angular 提供了一个服务，用于发出 HTTP 请求以从服务器获取数据。该服务称为 HttpClient，它可以与 RxJS 一起使用来发出 AJAX 请求。
要使用 HttpClient ，您需要通过依赖注入在组件或服务中注入它。然后可以使用 HttpClient 借口的方法例如，get()、post()、put()、delete() 等方法与服务器进行通信。
异步处理
在 Angular 应用程序中，异步处理是至关重要的。它可以使应用程序更快、更高效，并且能够处理大量的数据流。
本文将展示如何使用 HttpClient 和 RxJS 进行异步处理来处理 AJAX 调用。
GET 请求
以下是使用 HttpClient 和 RxJS 从服务器获取数据的基本方法：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ---------- - ---- -----------------------
------ - ---------- - ---- -------
------------
--------- ------------
------------ -------------------------
---------- -------------------------
--
------ ----- -------------- ---------- ------ -
------- ----------------
------------------- ----- ----------- - -
---------- -
----------------
-
---------- -
----------- - ------------------------------------------------------------
-
-在上面的代码中，我们在组件中注入了 HttpClient 服务，并使用 get() 方法发起 HTTP GET 请求。由于 get() 等方法返回一个 Angular Observable 对象，因此可以轻松地使用 RxJS 进行异步处理。
在这里我们使用 $ 符号来表示 Observable 对象，方便代码识别。
在组件中，我们可以订阅 posts$ 可观察对象来获取来自服务器的响应数据。
<ul>
<li *ngFor="let post of posts$ | async">
{{post.title}}
</li>
</ul>在模板中，我们使用 async 管道作为 Observable 对象的处理程序来订阅它。由于 Observable 对象返回的是一个流，因此使用 async 管道可以自动订阅和取消订阅流，以便在组件销毁时自动清理。
POST 请求
以下是如何使用 HttpClient 和 RxJS 发送数据到服务器的POST请求：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- - ---- -----------------------
------------
--------- ----------------
------------ -----------------------------
---------- -----------------------------
--
------ ----- ----------------- -
----- ------ - ---
------------------- ----- ----------- - -
---------- -
------------------------------------------------------------ ----------
--------------- -- -------------------
-
-在上述代码中，我们使用 HttpClient 的 post() 方法向服务器发送数据。我们还订阅返回的响应数据，以便在控制台中打印数据。
RxJS 操作符
在 RxJS 中，存在许多操作符，用于处理异步流来实现更高级的功能。下面是一些最常用的操作符：
map 操作符
map 操作符用来转换 Observable 流中的每个值。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- - ---- -----------------------
------ - ---------- - ---- -------
------ - --- - ---- -----------------
--------- ---- - ------- ------- --- ------- ------ ------- ----- ------ -
------------
--------- ------------
------------ -------------------------
---------- -------------------------
--
------ ----- -------------- ---------- ------ -
------- -------------------
------------------- ----- ----------- - -
---------- -
----------------
-
---------- -
----------- - -------------------------------------------------------------------
------
--------- -- -
------------------ -- -
---------- - -------------------------
---
------ ------
--
--
-
-map 操作符允许您转换每个 Observable 流中的值。在这种情况下，我们使用 map 操作符将大写字母转换为每个 post 的 title 属性。
catchError 操作符
catchError 操作符用于处理可观察对象中的错误。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- - ---- -----------------------
------ - ----------- ---------- - ---- -------
------ - ---------- - ---- -----------------
--------- ---- - ------- ------- --- ------- ------ ------- ----- ------ -
------------
--------- ------------
------------ -------------------------
---------- -------------------------
--
------ ----- -------------- ---------- ------ -
------- -------------------
------------------- ----- ----------- - -
---------- -
----------------
-
---------- -
----------- - -------------------------------------------------------------------
------
---------------- -- -
-------------------
------ ------------------
--
--
-
-在这段代码中，我们使用 catchError 操作符来捕获可能发生的任何错误，并传递给控制台。使用 throwError() 方法可以重新抛出错误以将其传递到调用方。
tap 操作符
tap 操作符允许拦截可观察对象并执行自定义操作，而不需要修改可观察对象的值。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- - ---- -----------------------
------ - ---------- - ---- -------
------ - --- - ---- -----------------
--------- ---- - ------- ------- --- ------- ------ ------- ----- ------ -
------------
--------- ------------
------------ -------------------------
---------- -------------------------
--
------ ----- -------------- ---------- ------ -
------- -------------------
------------------- ----- ----------- - -
---------- -
----------------
-
---------- -
----------- - -------------------------------------------------------------------
------
--------- -- -------------------
--
-
-在这段代码中，我们使用 tap 操作符在控制台中打印从服务器返回的数据，而不修改任何数据。
总结
在本文中，我们学习了使用 RxJS 操作符和 Angular HttpClient 进行 AJAX 调用的基本方法。我们还介绍了 RxJS 中的一些常见操作符，例如 map、catchError 和 tap，以及如何使用它们来处理异步流。
使用 RxJS 和 HttpClient 可以更好地管理异步处理，从而使 Angular 应用程序更高效和可维护。
示例代码
本文的完整示例代码可在以下链接中找到：
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6494dd5648841e9894230902