Angular observables - 如果没有订阅，我需要取消订阅吗？

Question

我正在使用最新的 Angular 8，并且对 observables 的概念很陌生。我有一个问题，如果我直接调用一个可观察对象而不将其应用于订阅变量，我还需要取消订阅吗？以下是我想知道是否需要退订的场景？ 非常感谢提前

场景 1 - 从组件调用 httpService：

Service - httpService

     getContactsHttp(){
         let headers: any = new HttpHeaders(this.authService.getHeadersClient());
         return this.httpClient.get('/contacts', {headers: headers})
          .pipe(timeout(this.authService.getTimeoutLimit('normal')));
        }

Component - Calling getContactsHttp and sorting response

getContacts() {
 this.httpService.getContactsHttp().subscribe((data:any[])=>{
  this.records = this.sortData(data)
 })
}

场景 2 - 在组件中订阅的 observable 上

contacts$: new Subject<any[]>;

ngOnInit() {
  this.getContacts();
  this.contacts$.subscribe((data:any[])=>{
    this.records = this.sortData(data);
  })
}

getContacts() {
    this.httpService.getContactsHttp().subscribe((data:ContactSearch[])=>{      
      this.contacts$.next(data);
    })
  }

服务 - httpService

     getContactsHttp(){
         let headers: any = new HttpHeaders(this.authService.getHeadersClient());
         return this.httpClient.get('/contacts', {headers: headers})
          .pipe(timeout(this.authService.getTimeoutLimit('normal')));
        }

Answer 1

简短的回答，是的，您仍然将组件中的 observable 退订到 avoid subscription leaks。我首选的方法之一是使用 takeUntil() 运算符。

这是您可以在组件中使用它的方式。

private unsubscribe: Subject<void> = new Subject();

ngOnDestroy() {
  this.unsubscribe.next();
  this.unsubscribe.complete();
}

getContacts() {
  this.httpService.getContactsHttp()
    .pipe(
      takeUntil(this.unsubscribe),
    ).subscribe((data:ContactSearch[])=>{      
      this.contacts$.next(data);
    });
 }

正如Brian Love所解释的，

• 首先，我们导入 takeUntil() 运算符以及 Subject 班级。
• 接下来，我们定义一个名为 unsubscribe 的私有实例属性， 这是一个主题。
• 我们还创建了一个新的 Subject 实例，定义 泛型类型为 void。我们使用 takeUntil() 操作符 调用 subscribe() 之前的 pipe() 方法，提供取消订阅 可观察的。
• 在 ngOnDestroy() 生命周期方法中，我们发出一个 next() 通知，然后完成（）取消订阅观察。这 订阅现已完成，我们已立即取消订阅 当在我们的生命周期中调用 ngOnDestroy() 方法时 组件。

Answer 2

1) 直接调用http调用一般不需要取消订阅。即使组件被销毁，销毁后订阅完成的开销也是微不足道的。 如果快速切换组件，您需要在此处取消订阅。取消订阅也会取消 http 请求，因此如果需要，请取消订阅。

退订不会造成任何伤害。如果您不确定，请始终退订。

2) 当您订阅一个在您的组件被销毁时未完成的可观察对象时，您确实需要取消订阅。否则这将导致内存（和性能）泄漏。因为 observable 本身持有对订阅的引用，而订阅持有对组件的引用，所以组件永远不会从内存中清除，并且订阅中描述的操作将一直运行直到 observable 完成，在您的情况下永远不会.组件的每个实例都会发生这种情况。

解决方案

我将分享两个关于简化退订负担的流行选项。扩展 @amanagg1204 答案，您可以创建一个基础组件，您可以从中扩展所有未来的组件。您可以在其中包含自定义运算符。这样做有一个缺点 - 如果您需要在组件中使用 ngOnDestroy，则始终必须调用 super.ngOnDestroy()。

import { OnDestroy } from "@angular/core";
import { Subject, MonotypeOperatorFunction } from "rxjs";
import { takeUntil } from "rxjs/operators";

export abstract class UnsubscribeComponent implements OnDestroy {
  protected destroyed$: Subject<void> = new Subject();

  ngOnDestroy(): void {
    this.destroyed$.next();
    this.destroyed$.complete();
  }

  takeUntilDestroyed<T>(): MonoTypeOperatorFunction<T> {
      return takeUntil(this.destroyed$);
  }
}

export class Component extends UnsubscribeComponent {
   ngOnInit() {
      this.contacts$.pipe(
              this.takeUntilDestroyed(),
          ).subscribe((data:any[])=>{
          this.records = this.sortData(data);
      });
   }

  // WARNING - if you declare your ngOnDestroy in the component
  ngOnDestroy() {
     // DO NOT FORGET to call this
     super.ngOnDestroy();
     doYourStuff();
  }

}

其他选项（我更喜欢）是没有父抽象类（尽管它也可以这样实现），而是使用名为 subsink (npm i subsink --save) 的实用程序

import { SubSink } from 'subsink';

export class SampleComponent implements OnInit, OnDestroy {
  private subs = new SubSink();

  ngOnInit(): void {
    // Just put it into sink.
    this.subs.sink = this.contacts$.subscribe((data:any[])=>{
      this.records = this.sortData(data);
    });
    // call repeatedly
    this.subs.sink = this.otherService$.subscribe((data:any[])=>{
      this.things = this.sortData(data);
    });
  }

  ngOnDestroy(): void {
    // this will unsubscribe all
    this.subs.unsubscribe();
  }
}

Answer 3

是的，总是退订。您有多种退订方式，具体如下：

-使用takeUntil()

-take(1)

-unsubscribe()中的ngOnDestroy()

-使用async 管道

是的，httpClient 返回一个冷的 observable，但是这个问题将解释你为什么仍然应该unsubscribe。 （看第二个得票最高的答案）

Is it necessary to unsubscribe from observables created by Http methods?

https://blog.angularindepth.com/why-you-have-to-unsubscribe-from-observable-92502d5639d0

附注：

1) 切勿订阅该服务。我们处于 Angular 世界中，我们需要以一种被动的方式思考，在服务中购买订阅会阻止您使用该 observable，以防您想将其与其他东西结合使用。

2) 在使用 observables 时开始使用声明式方法。

3) 停止使用any，这不是一个好习惯。充分利用类和接口，这样您的代码将更具可读性。

声明式方法的好处： - 利用 RxJs 可观察对象和操作符的力量 - 有效地结合流 -Easy share observables - 随时响应用户操作

您可能想知道声明式方法是什么样的？

您将这样做，而不是返回 observables 的方法。

SERVICE.TS

  yourObservableName$ = this.httpClient.get('/contacts', {headers: headers})
              .pipe(timeout(this.authService.getTimeoutLimit('normal')));

COMPONENT.TS

this.httpService.yourObservableName$.subscribe(...)

Answer 4

正如许多人已经指出的那样，http 返回一个 Cold Observable，但您仍然应该取消订阅该 observable。我会建议一种更好的方式来管理取消订阅，这样您就不必手动添加 ngOnDestroy()生命周期钩子每次。 我将首先创建一个取消订阅组件，如下所示

import { OnDestroy } from "@angular/core";
import { Subject } from "rxjs";

export abstract class UnsubscribeComponent implements OnDestroy {
  protected destroyed$: Subject<void> = new Subject();

  ngOnDestroy(): void {
    this.destroyed$.next();
    this.destroyed$.complete();
  }
}

然后在每个组件类声明中扩展它（在需要的地方）

export class ABC extends UnsubscribeComponent

在构造函数中调用 super()

constructor(your dependencies) {
  super()
}

最后，根据您的订阅，执行以下操作

this.obs$.pipe(takeUntil(this.destroyed$)).subscribe(() => {
  // some logic here
})

另一件事是 takeUntil 应该是管道中的最后一个运算符。希望对您有所帮助。

Answer 5

是的，取消订阅 ngOnDestroy 生命周期方法中的所有订阅是一个很好的做法，您可以通过在类级别变量中获取每个订阅的引用然后手动取消订阅来做到这一点！