在 Angular 服务的 OnDestroy 挂钩中取消订阅 HTTP 客户端调用答案

【问题标题】：Unsubscribing to HTTP client call in OnDestroy hook of Angular Service在 Angular 服务的 OnDestroy 挂钩中取消订阅 HTTP 客户端调用
【发布时间】：2021-07-21 22:50:16
【问题描述】：

有没有办法取消订阅来自角度服务 onDestroy 钩子的 http 调用。

附：我知道 rxjs 'take' 运算符或取消订阅组件本身的服务。

    import { HttpClient } from "@angular/common/http";
import { Injectable, OnDestroy } from "@angular/core";

@Injectable()
export class SampleService implements OnDestroy {
  constructor(private httpClient: HttpClient) {}

  getSampleData() {
    return this.httpClient.get("https://jsonplaceholder.typicode.com/todos/1");
  }
  ngOnDestroy(): void {
    // automatically unsubscribe to service.
  }
}

【问题讨论】：

这能回答你的问题吗？ Is it necessary to unsubscribe from observables created by Http methods?
@R.Richards 感谢您的链接。但是当服务实例被组件销毁时，我们是否可以编写一些清理逻辑来检查是否需要取消订阅任何 http 调用？？

标签： javascript angular typescript rxjs angular-material

【解决方案1】：

服务没有 UI 驱动的生命周期，因此无论您如何实现 onDestroy，除非您自己手动调用它，否则它永远不会被调用。

这就是我们拥有工具、读取 API 的原因，例如：

async pipe 示例：

<div> {{ yourObservable$ | async | json }} </div>

@Component({...})
export class Component implements OnInit {
   yourObservable$: Observable<any>
   constructor(public yourService: TheService) {
       this.yourObservable$ = this.yourService.getSampleData()
   }
}

每当组件被删除时，异步管道会通知生命周期的变化并自动订阅和取消订阅

Subscription（你可以通过调用.add添加其他sybscriptions）和你组件的onDestroy调用subscription.unsubscribe()

Subscription.unsubscribe 是构建异步管道的基础，您也可以自己使用它

【讨论】：

但是我们看到Angular服务的非单例实例会在提供实例的组件被销毁时调用该服务的ngOndestroy？？我正在寻找某种方法来检查是否还有任何订阅者可以进行 http 调用。
通常在处理这样的事情时：有一个非常有效的黄金法则，并且几乎是 C 编程语言管理它的方式：“如果你要在厨房做饭，那就别管它了完成后找到它”。所以，如果一个组件订阅了，那么他应该负责取消订阅。如果您让订阅保持打开状态，您将泄漏内存并降低性能（因为浏览器将忙于执行无用的订阅代码）。
如果你想在组件被销毁时在服务端进行一些清理，你可以从组件调用service.onDestroy()；但要注意；服务实例可能是共享的，如果你做“危险”的事情，你可能会弄乱其他组件的状态。我强烈建议您坚持使用async 管道