取消订阅这几种方法定阅回到目标

应用rxjs也会经常使用取消订阅的操作，下边讲下其取消订阅这几种方法

定阅回到目标

创建一个可研究对象，如：const observable = new Observable((subscriber) => {subscriber.next(1)}), 根据observable目标定阅回到能够定阅目标，每一次定阅回到一个相匹配可定阅目标，因此能通过可定阅目标撤销相匹配定阅，如下所示

let subscriber
const observable = new Observable((subscriber) => {
    subscriber.next(1); 
    subscriber = subscriber
})
// 定阅形成可定阅目标
const subscription$ = observable.subscribe(function subscribe(data) { console.log(data) })

// 取消订阅, subscribe函数公式不会再实行，只能打印出1，后边取消订阅了，2将无法打印出
subscription$.unsubscribe()
subscriber.next(2) 

这种方法当定阅目标得多，就好烦了，一共有多少个就需要储存几个自变量，再一个个撤销，可是一定有存有的必需，当撤销标准不相同较为适宜，因标准不一样所以必须要确保定阅目标有区别，所以一定要用这种方式

标准撤销

标准撤销应用takeUntil运算符，应用步骤如下：

import { interval, fromEvent, takeUntil } from 'rxjs';

const source = interval(1000);
// 点一下便会有流推出去
const clicks = fromEvent(document, 'click');
// takeUntil(clicks) 的意思就是：clicks只需发布一个流，那样result定阅会自动撤销
const result = source.pipe(takeUntil(clicks)).subscribe(x => console.log(x));

这一常见招数就申明一个Subject目标，如下所示

const destroy$ = new Subject()

// 上边clicks换为 destroy$
// 再自身手动式在要关闭的情况下启用 destroy$.next()
destroy$.next()
destroy$.complete() // 注消Subject

说到这里感觉跟上边的形式没什么差别，编码没少哪些，但在这里可以集中化撤销，例如定阅了好多个，撤销标准一样，那样最终撤销时，仅用在takeUntil里的目标推一次流就取消了，能够减少变量声明合成正确的反复撤销模版

多定阅情景，许多使用的这种方法，也是非常介绍的方法，常用情景要在网页页面消毁时，实行上边最终二行编码，撤销全部定阅

立即申明

立即申明Subscription类管理方法，直接用编码

import { interval, Subscription } from 'rxjs';
const subscription$ =  new Subscription()
const source = interval(1000);
// 需要一起取消订阅目标可以加里边
subscription$.add(source.subscribe(() => {console.log(1)}))
subscription$.add(source.subscribe(() => {console.log(2)}))
subscription$.add(source.subscribe(() => {console.log(3)}))
// 取消订阅，这儿会撤销上边的三个定阅
subscription$.unsubscribe()

这一条件撤销适用场景类似，现阶段使用的非常少，并没有takeUntil实用

好不好用，实践活动才发现

大部分场景是离去当前页时撤销有关定阅，因此多界面运用不需要担心（刷新页面没了），单页应用spa，当离去当前页时进行取消订阅，这儿以vue和angular应用为例子

vue3实例：

const source = interval(1000);
const sub$ = source.subscribe(() => {console.log(1)})
onUnmounted(() => {
   sub$.unsubscribe()
})

改成use完成

function useSub(sub) {
    onUnmounted(() => {
       sub.unsubscribe()
    }) 
}

// 那就可以那样启用
useSub(source.subscribe(() => {console.log(1)}))

和vue不相干书写, 融合响应式网站修饰符来达到

// 在没有清晰是不是活跃性时，可以使用传参分辨，是不是起效 这在vue部件上用毫无疑问有活力的，所以不需要分辨反回值
function useSub(sub) {
   // 分辨现阶段修饰符是不是活跃性
   if (getCurrentScope()) {
      // 修饰符不活泼时，取消订阅
       onScopeDispose(() => {
           sub.unsubscribe()
       }) 
       return true 
   } 
   return false
}

angular实例

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less']
})
export class AppComponent implements OnDestroy  {
  destroy$ = new Subject()
  constructor() {
    fromEvent(document, 'click').pipe(takeUntil(this.destroy$)).subscribe(() => {})
  }
  ngOnDestroy(): void {
    this.destroy$.next()
    this.destroy$.complete()
  }
 }
}

service 封装形式

// 服务项目
@Injectable()
export class DestroyService extends Subject implements OnDestroy {
  constructor() { }
  ngOnDestroy(): void {
    this.next()
    this.complete()
  }

}
// 部件中应用

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less'],
  providers: [DestroyService]
})
export class AppComponent {
  constructor(private destroy$: DestroyService) {
    fromEvent(document, 'click').pipe(takeUntil(this.destroy$)).subscribe(() => {})
  }
}

个人感觉在 vue 和 angular 中应用rxjs取消订阅封装形式中，vue的封装形式与使用更方便，封装形式基本原理一样，定阅一个流，在无需时撤销（部件消毁）

留意: 当一个流 出错（error） 或 实现了（complete）表明就已经停止，这时候定阅也就停了，因此这时候的定阅可以不用撤销

之上若有不合适的，欢迎在评论区留言交流经验