在现代的前端开发中，我们常常需要通过轮询的方式来获取数据，以便及时更新最新状态并提供良好的用户体验。而 RxJS，作为一个强大的 JavaScript 库，提供了一种优雅的方式来实现轮询请求，使得代码更加可读、可维护和可测试。
本文将介绍如何在 Angular 应用中使用 RxJS 实现轮询请求，并附上详细的代码示例。
了解 RxJS
在开始讲解如何使用 RxJS 实现轮询请求之前，我们先来了解一下 RxJS 的基础知识。
RxJS（Reactive Extensions for JavaScript）是一个基于观察者模式的 JavaScript 库，它提供了一系列操作符和方法，可以帮助我们更好地处理异步数据流。
这里的“观察者模式”指的是一个主体对象发生变化时，将自动通知其依赖者进行更新的一种模式。在 RxJS 中，主体对象是一个“可观察对象”，依赖者是“观察者”，而数据流则可以用“操作符”来描述。
一个典型的 RxJS 流程可以用下图来表示：
以上这幅图说明了处理异步数据流的一般方式：
- 创建可观察对象：通过调用事件源上的 Observable 构造函数创建一个可观察对象。
- 触发订阅流程：通过调用 .subscribe() 方法，传入一个或多个观察者来触发订阅流程。
- 处理异步数据流：当事件源发出新事件时，通过调用 next() 方法将数据推入可观察对象流中。
- 停止流：通过调用 .complete() 或 .error() 方法停止流，同时释放所有关联的资源。
更多关于 RxJS 的内容可以参考官网：RxJS
实现轮询请求
在 Angular 中，我们通常使用 HttpClient 来进行 HTTP 请求。考虑到轮询请求会持续触发，我们需要取消旧的请求、并发起新的请求，不断循环以实现轮询。其中，RxJS 提供了 setInterval()、timer() 等操作符来实现轮询请求。
下面是一个简单的轮询请求示例：
-- -------------------- ---- -------
------ - ------ ---------- - ---- -------
------ - -------- - ---- -----------------
------ - ---------- - ---- -----------------------
------ ----- -------------- -
------- --------------- - ----- -- ----- - -
------------------- ----- ----------- --
------ --------------- --------------- -
------ -------- ---------------------------
----------- -- ---------------------------
--
-
-以上代码中，我们使用了 timer() 操作符来创建一个可观察对象。它会在订阅后立即执行一次请求，然后等待指定时间后再次执行请求。而每次执行请求，我们使用 mergeMap() 操作符将 HTTP 请求合并成一个 Observable，并将其返回给调用方。
需要注意的是，以上代码中使用了 HttpClient，所以需要在模块的 providers 中导入 HttpClientModule。
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ---------------- - ---- ----------------------- ----------- -------- - ---------------- -- ---------- --- -- ------ ----- --------- - -
接下来，在我们的组件中调用 PollingService 的 startPolling() 方法就可以开始轮询请求了：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - -------------- - ---- --------------------
------------
--------- ----------------
------------ -----------------------------
---------- -----------------------------
--
------ ----- ------------------ ---------- ------ -
------ ----- ----
------------------- --------------- --------------- --
---------- -
---------------------------------------------
------ -- - --------- - ----- --
------- -- - --------------------- -
--
-
-在上面的代码中，我们订阅了 startPolling() 方法所返回的可观察对象，并在每次请求返回时更新数据。
停止轮询请求
轮询请求的停止通常分两种情况：
- 用户离开当前页面，或该组件已经被销毁。
- 用户主动停止轮询请求。
对于第一种情况，我们可以在 OnDestroy 周期钩子中停止轮询：
-- -------------------- ---- -------
------ - ---------- ------- --------- - ---- ----------------
------ - -------------- - ---- --------------------
------ - ------- - ---- -------
------ - --------- - ---- -----------------
------------
--------- ----------------
------------ -----------------------------
---------- -----------------------------
--
------ ----- ------------------ ---------- ------- --------- -
------ ----- ----
------- ------------- ------------- - --- ----------
------------------- --------------- --------------- --
---------- -
----------------------------------------
----------------------------
------------
------ -- - --------- - ----- --
------- -- - --------------------- -
--
-
------------- -
-------------------------
-----------------------------
-
-在上面的代码中，我们使用了 Subject 和 takeUntil() 操作符来订阅轮询请求的可观察对象。当组件销毁时，我们通过调用 Subject 的 next() 和 complete() 方法来停止订阅并释放所有关联的资源。
对于第二种情况，我们可以在组件中添加一个“停止轮询”按钮，并且在用户主动点击按钮时停止轮询：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - -------------- - ---- --------------------
------ - ------- - ---- -------
------ - --------- - ---- -----------------
------------
--------- ----------------
------------ -----------------------------
---------- -----------------------------
--
------ ----- ------------------ ---------- ------ -
------ ----- ----
------- ------------- ------------- - --- ----------
------------------- --------------- --------------- --
---------- -
----------------------------------------
----------------------------
------------
------ -- - --------- - ----- --
------- -- - --------------------- -
--
-
------------- -
-------------------------
-----------------------------
-
-在上面的代码中，我们增加了一个 stopPolling() 方法，并在模板中添加一个“停止轮询”按钮，当用户点击该按钮时，我们就可以停止轮询请求。
<button (click)="stopPolling()">停止轮询</button>
总结
通过 RxJS，我们可以很方便地实现轮询请求，使我们的应用更加实时和交互性。在使用 RxJS 实现轮询请求时，需要注意订阅流程的管理，及时释放所有关联的资源以防止内存泄露。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6651d076d3423812e463291a