RxJS 是一个用于把异步数据处理文化的 JavaScript 库，是响应式编程的一种体现。RxJS 自带了各种操作符来处理各种异步数据流，其中 takeUntil 操作符就是其中之一。
什么是 takeUntil 操作符？
takeUntil 操作符允许我们在一个 Observable 接收到一个特定值或者另一个 Observable 发出信号时停止发出值。
更具体的说，takeUntil 操作符会一直等待被传入的信号 Observable 发生数据流事件，等到该 Observable 发生任何事件后，它就会停止当前 Observable 的数据流。也就是说，当停止信号到来时，原本的 Observable 也就停止了。
takeUntil 的实现方式
在 RxJS 中，takeUntil 操作符有两种实现方式：通过传入 Observable 或 Promise，或者传入一个 Subject。
通过传入 Observable 或 Promise
在这种情况下，takeUntil 接收一个 Observable 或 Promise 作为参数，当这个 Observable 或 Promise 发出值时，takeUntil 就会停止自己接收原始 Observable 的值。
------ - -------- - ---- ------- ------ - --------- - ---- ----------------- ----- ------ - --------------- ----- ------ - --- --------------- -- ------------- -- ----------------- ------- ----- ------- - ------------------------------- ------------------- ----- ------- -- ------------------- --------- -- -- ----------------------- ---
在上面的代码片段中，原始的 interval Observable 每秒发出一个数值，takeUntil 操作符接受了一个 5s 后 resolve 的 Promise。因此，原始 Observable 一旦接收到这个 Promise，它就会停止发出数据流并调用 complete 回调函数。
通过传入一个 Subject
在这种情况下，takeUntil 接收一个 Subject 作为参数，当这个 Subject 发出值时，takeUntil 就会停止自己接收原始 Observable 的值。
------ - --------- ------- - ---- ------- ------ - --------- - ---- ----------------- ----- ------ - --------------- ----- ----- - --- ---------- ----- ------- - ------------------------------ ------------- -- ------------- ------ -- -- --- ------------------- ----- ------- -- ------------------- --------- -- -- ----------------------- ---
在这段代码片段中，原始的 interval Observable 每秒发出一个值，takeUntil 操作符接受了一个会在 5s 后发出值的 Subject。当这个 Subject 发出值时，takeUntil 就会停止接收原始 Observable 的数据流。
示例应用
takeUntil 操作符可以用于一些场景，例如处理一个表单的按键事件。可以用 takeUntil 操作符来发出一个信号，当它接收到这个信号时，表单输入事件就会听取停止。如下面这个示例所示，它在表单输入中追踪一个用户进行的唯一搜索，并防止触发昂贵的 AJAX API 调用。
------ - ---------- -- - ---- -------
------ - ---- - ---- ------------
------ - ------------- ---- ---------- --------- - ---- -----------------
----- --------- - --------------------------------------
----- ------------ - -----------------------------------------
----- -------- - --- ----------
-------------------- --------
------
------------------
--------- -- --------------------
----------------- -- -
-- ------------- --- -- -
------ -------
-
----- --- - --------------------------------------------------------
------ ------------------
---
-------------------
------------------ -- -
------------------------ - ---
------------------------- -- -
----- -- - -----------------------------
-------------- - ---------------
-----------------------------
---
---
------------- -- ---------------- ------在上面的代码片段中，用户每次将他们的搜索输入放入 searchBox 中，我们会在 input 事件上监听，将其转换为搜索 URL ，然后使用 switchMap 操作符切换到 github API Observable。使用 takeUntil 操作符时检查 destroy$ 中是否有值，如果有，则对该 Observable 进行清理工作以避免内存泄漏。
总结
本文介绍了 RxJS 中的 takeUntil 操作符以及其两种实现方式。通过掌握 takeUntil 操作符的使用，可以优化异步数据流的处理方式。通过示例应用，可以更清楚地理解 takeUntil 操作符的使用方法。希望本文对前端开发者们在学习 RxJS 过程中有一定的指导意义。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64cb49035ad90b6d041faa5d