RxJS 是一个强大的响应式编程库，它让前端开发变得更加简单和愉悦。RxJS 操作符是这个库的核心，它们可以用于创建、转换、过滤和合并各种 Observable 流。finalize 操作符是其中之一，它可以在 Observable 流结束时执行某些操作，比如清理资源、取消订阅、记录日志等。在本文中，我们将介绍 finalize 操作符的用法、特点和示例，帮助你更好地理解和应用它。
什么是 finalize 操作符
finalize 操作符是 RxJS 6 中新增的一个操作符，它的作用是在 Observable 流结束时执行指定的回调函数。这个回调函数不论是正常结束还是异常结束都会被调用，它可以用于清理资源、发送最后一个通知、取消订阅等场景。finalize 操作符完全不会改变 Observable 流中的数据流动，它只会在最后一个数据元素被发射、错误通知被发送或者完结通知被触发时执行。
finalize 操作符的函数签名如下：
finalize(callback: () => void): MonoTypeOperatorFunction<T>
参数 callback 是一个没有参数和返回值的函数，它表示在 Observable 流结束时需要执行的操作。而返回值则是一个 MonoTypeOperatorFunction<T> 类型的函数，它接收一个 Observable 对象并返回一个新的 Observable 对象。这样我们就可以通过 pipe() 方法将 finalize 操作符应用到任意 Observable 流中。
finalize 操作符的应用场景
下面是 finalize 操作符在实际应用中的几种场景：
1. 清理资源
在使用 Observable 流的过程中，可能会创建和使用一些临时资源，比如打开文件、连接数据库、启动服务等等。这些资源在流结束时需要被释放，否则可能会造成内存泄漏、连接泄露、端口占用等问题。使用 finalize 操作符，我们可以很方便地在流结束时释放这些资源，代码如下：
-- -------------------- ---- -------
------ - --------- - ---- -------
------ - -------- - ---- -----------------
----- ------ - --- ---------------------------------
----------------- ----------
------
----------- -- -
---------------------- ---------- ----------
---------------
--
-
------------------ -- -
--------------------- ---------- --------------
---在这个例子中，我们使用 fromEvent() 创建了一个 WebSocket 对象，并通过 pipe() 方法添加了一个 finalize 操作符。当 Observable 流结束时，该 finalize 操作符会调用指定的回调函数，并在控制台输出一条日志和关闭 WebSocket 连接。这样我们就保证了 WebSocket 连接在流结束时被正确关闭。
2. 发送最后一个通知
有时候我们需要在流结束时发送一条额外的通知，比如显示总共处理了多少条数据，输出错误日志等等。使用 finalize 操作符，我们可以很容易地实现这个功能，代码如下：
-- -------------------- ---- -------
------ - -------- - ---- -------
------ - ----- -------- - ---- -----------------
--- ------- - --
--------------
------
--------
----------- -- -
--------------------- ---------- ---------- ---------
--
-
-------------- -- -
----------------------- ---- -----------
----------
---在这个例子中，我们使用 interval() 创建了一个每秒发射一个数字的 Observable 流。并用 take(5) 操作符表示只处理前 5 个数字。当流结束时，finalize 操作符会调用指定的回调函数，并在控制台输出一条日志，记录总共处理了多少个数字。这样我们就可以方便地监测和统计流的处理情况。
3. 取消订阅
在实际开发中，Observable 流可能会持续不断地发射数据，订阅者也需要持续不断地接收和处理这些数据。但是有时候可能出现一些意外情况，比如网络中断、用户退出场景等等，这时我们就需要取消订阅并释放相关资源。使用 finalize 操作符，我们可以很容易地实现这个功能，代码如下：
-- -------------------- ---- -------
------ - --------- - ---- -------
------ - -------- - ---- -----------------
----- ------ - ------------------- ---------
----- ------------ - ------
------
----------- -- -
----------------- ----------------
--
-
---------------- -- -
--------------------- ----- -------- -------
---
-- ----
------------- -- -
---------------------------
-- ------在这个例子中，我们使用 fromEvent() 创建了一个 document 对象的 click 事件的 Observable 流。并添加了一个 finalize 操作符，当流结束时输出一条日志。然后我们使用 setTimeout() 方法模拟了 5 秒后用户取消订阅的情况。在这个时间到达后，我们使用 subscription.unsubscribe() 方法手动取消订阅并释放相关资源。
finalize 操作符的注意事项
在使用 finalize 操作符时，需要注意以下几点：
- finalize 操作符会在 Observable 流结束时执行指定的回调函数，并不保证回调函数的执行顺序和时间。所以不能把 finalize 操作符看成是严格的同步操作符，而是一种异步的清理机制。
- finalize 操作符不会改变 Observable 流中的数据流动，它只会在流结束时执行某些操作。所以如果需要在流中间进行清理操作，可以考虑使用其他适当的操作符，比如 switchMap()、mergeMap()、concatMap() 等。
- finalize 操作符不会接收和处理任何数据，它只会在流结束时执行一次，当连续多次调用 finalize 操作符时，只有最后一个操作符会起作用。
- finalize 操作符支持使用同步或异步的回调函数，如果回调函数是异步的，需要特别留意其执行结果和时间点，避免出现意外情况。
finalize 操作符的示例代码
最后，我们来看一个完整的使用 finalize 操作符的示例代码，它演示了如何使用 WebSocket 完成一次简单的数据通讯，并在流结束时显示相关信息。
-- -------------------- ---- -------
------ - --------- - ---- -----------------
------ - -- - ---- -------
------ - --------- -------- - ---- -----------------
----- ------- - ---------------------------------
----- -------- - ------------------
-- -- -- ----- ------------ ------ --------- --- -- ----
-- -- -- ----- -------------- ------ --------- --- -- ----
------- -- ------------- --- --------- -- ----
--
----- ----- - --------------
---------------- -- ------------------ -- - ------- --- ----
----------- -- -
----------------- -------- -------------
-------------------
--
--
----------------
---- -- --------------------- ------- ------
----- -- -------------------- ----------- ------
--在这个例子中，我们定义了一个 WebSocket 对象并使用 webSocket() 函数创建了一个 WebSocket 连接。然后，我们使用 socket$.multiplex() 方法创建一个 message$ 的 Observable 流，用于处理消息数据，该方法接收 3 个参数：订阅消息参数、取消订阅参数和是否过滤消息。其中订阅消息参数是对象类型，表示订阅的消息类型和目标主题。取消订阅参数同订阅参数。而过滤消息是一个函数类型，表示根据某个条件过滤要处理的消息。
接着，我们使用 message$ 创建了一个 data$ 的 Observable 流，通过 mergeMap() 方法将 message 转换成 data。最后，我们使用 finalize() 方法添加了一个回调函数，表示在流结束时需要执行的操作。这个操作包含两个部分，一是在控制台输出一个日志，指示数据传输完成。二是调用 socket$.complete() 方法，关闭 WebSocket 连接。
最后，我们使用 data$.subscribe() 方法启动 Observable 流，同时打印出接收到的数据或错误信息。当所有数据接收完成时，程序会自动结束并退出。
总结
在本文中，我们学习了 RxJS 中的 finalize 操作符的用法、特点和示例。finalize 操作符是一种非常有用的清理机制，它可以帮助我们准确地控制 Observable 流结束时执行的操作，从而避免一些资源泄漏和错误。在实际应用中，我们可以根据不同的需要和场景选择合适的方式使用 finalize 操作符，并注意其注意事项和约束条件。希望本文能够帮助你更好地理解和使用 RxJS 操作符，提高前端开发效率和质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6451fa40675af4061b5afae9