如何优雅的取消订阅-rxjs

rxjs中最头疼的莫非取消订阅的问题,其头疼程度不下于removeEventListener。本文试图探讨分析rxjs中取消订阅的几种方式,并做对比优劣分析及应用场景。
  • 方案: 手动取消订阅 推荐***

逻辑简单,需要额外引入变量保存,代码量大和维护难!

let sub = this.props$.subscribe();

// 当注销时取消订阅
sub.unsubscribe();
复制代码
  • 方案:takeUntil Or takeWhile 推荐*****

takeUntil 订阅并开始镜像源 Observable 。它还监视另外一个 Observable,即你 提供的 notifier 。如果 notifier 发出值或 complete 通知,那么输出 Observable 停止镜像源 Observable ,然后完成。
takeWhile 发出在源 Observable 中满足 predicate 函数的每个值,并且一旦出现不满足 predicate 的值就立即完成。

props$.pipe(
    takeUntil(res=>end$)
).subscribe()

//当注销事end$发射事件
end$.next().
复制代码
  • 方案:控制源头 推荐***

简单容易维护,不适合复杂场景

let sub = Observable.create((subscriber)=>{
  // 保存subscriber
  this.subscriber = subscriber;
});

// 注销时
this.subscriber.complete();
复制代码

小结,学习rxjs重点应该放在pipe(这里的内容逻辑),尽量多的用流的思想解决问题!订阅总是发生在你把所有流处理完成后合并的那一个或几个关键主流上!

complete 和 error 触发后,unsubscribe 也会自动调用
当 next、complete和error 出现异常时,unsubscribe 也会自动调用以保证资源不会浪费
next、complete和error是可选的。按需处理即可,不必全部处理

我也是刚开始学习研究这块,有在研究的可以讨论一下!

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值