如何取消订阅由 http 创建的 Observable

当我们向服务器发送请求时，我们会得到一个 Observable 对象，Observable 对象能够发送多个值，也就是从服务器接收的多个响应。这是 RxJS 库中的一个重要概念。Observable 具有多个订阅者订阅的能力，同时，Observable 也可以取消订阅。那么，在使用 Observable 时，我们应该如何取消订阅呢？

1）使用 Subscription 对象

在 RxJS 库中，我们可以使用 Subscription 对象来处理取消订阅的操作。首先，我们需要先通过 Observable 订阅得到一个 Subscription 对象，如下：

import { Subscription } from 'rxjs';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  title = 'app';

  private subscription: Subscription;

  constructor(private http: HttpClient) {}

  sendRequest() {
    this.subscription = this.http.get('https://jsonplaceholder.typicode.com/posts').subscribe(response => {
      console.log(response);
    });
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

上面的代码中，我们使用了 HttpClient 对象向服务器发送了一个 GET 请求，并订阅了产生的 Observable 对象，得到了一个 Subscription 对象。我们在该组件中还实现了一个名为 ngOnDestroy() 的 Angular 生命周期钩子方法，在该方法中，我们调用 Subscription 对象的 unsubscribe() 方法取消对产生的 Observable 的订阅。

2）使用 takeUntil 操作符

除了使用 Subscription 对象外，我们还可以使用 takeUntil 操作符来取消 Observable 的订阅。在 RxJS 中，takeUntil 操作符能够从 Observables 序列中取值，直到传入的另一个 Observable 开始发出值。这个操作符非常适合用来取消 Observable 的订阅。

import { HttpClient } from '@angular/common/http';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  title = 'app';
  private destroy$: Subject<boolean> = new Subject<boolean>();

  constructor(private http: HttpClient) {}

  sendRequest() {
    this.http.get('https://jsonplaceholder.typicode.com/posts').pipe(
      takeUntil(this.destroy$)
    ).subscribe(response => {
      console.log(response);
    });
  }

  ngOnDestroy() {
    this.destroy$.next(true);
    this.destroy$.unsubscribe();
  }
}

上面的代码使用了 takeUntil 操作符，其中我们使用了一个名为 destroy$ 的 Subject 对象，并在 ngOnDestroy() 生命周期钩子方法中调用了该 Subject 对象的 next() 方法，表示通过该 Subject 发出一个值，从而让 takeUntil 操作符停止发送 Observable 序列中的值，完成取消 Observable 的订阅的操作。在 ngOnDestroy() 周期钩子方法中，我们也需要调用 destroy$ 对象的 unsubscribe() 方法，释放 destroy$ 对象占用的内存资源。