如何优雅的取消订阅-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是可选的。按需处理即可,不必全部处理

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

你可能感兴趣的:(如何优雅的取消订阅-rxjs)