RxJS finalize 操作符在 Observable 终止后执行逻辑

小渣渣

需求：Angular 项目，当点击页面某个按钮的时候，会发送 HTTP 请求，由于一些接口比较耗时，需要显示加载动画效果，当 HTTP 请求完成关闭加载动画。当请求成功或者出现错误都需要关闭加载动画。

常规写法

如下：

登录可见。

也就是当请求成功和发生错误都需要调用关闭加载动画，有没有更简单的方法呢？类似 c# 中的 try-catch-finally。

使用 finalize 运算符

它的作用就是 try-catch-finally 中 finally 的功能，我们只需要写一遍代码即可，无论成功和失败都会执行该逻辑。

代码如下：

登录可见。

finalize 如何工作？它基本上是通过订阅向可观察对象的拆卸添加回调 add(fn)。这保证了它将在错误、完成和取消订阅时被调用。

注意，只要我们的 Observable 终止，finalize 操作符就会被执行。这个很重要！对于 Angular HTTP，这非常有效，因为一旦请求完成，Angular HTTP 服务返回的“完成”。

（完）

小渣渣

Angular RxJS 之 Subject 主题订阅
https://www.itsvse.com/thread-9209-1-1.html