Angualr 优雅的取消 RxJs 订阅

787 阅读1分钟

写在开头

使用 Angular 开发,用多了 RxJs 的订阅,如何恰当优雅的取消订阅,避免内存泄漏,是一个值得交流的话题。

#方案一

使用 unsubscribe 方法

订阅一个Observable可获得一个 Subscription 对象 ,该对象存在的 unsubscribe 方法可以用来取消订阅

这种方式看起来很好,完全能解决问题。但是设想一下,如果存在多个订阅,是不是要在声明变量 A、B、C...,来存储 Subscription 对象呢?管理过多的变量,这显然不是一个好的决定。所幸的是,Subscription 对象存在内置的方法可以帮我们更好的管理取消订阅。

unsubscribe方式

#方案二

使用操作符 takeUntil

何为 takeUntil,描述直到提供的 observable 发出值,它便完成。[文档地址][3]

借助 takeUntil 这个特性,可以方便的管理订阅。

takeUntil方式

这种方式看起来可以方便的取消订阅,但也有缺点,必须声明一个额外的 Observable,如果在过多的组件内使用订阅,是一个过于繁琐的事情。

#方案三

结合 Angular DI 系统和 takeUntil 实现更优雅的方式取消订阅

编写一个用于取消订阅的工具 Service,继承 Subject 使 Service 创建实例时具有 Subject 的特性,再实现 OnDestroy 生命周期钩子。

应该注意的是,必须在组件的 providers 单独导入 Service,确保每个组件内 Service 实例的唯一性!

个人博客地址欢迎访问