Angular HttpClient取消订阅[重复]

Posted 2023-02-22

【中文标题】Angular HttpClient取消订阅[重复]

【英文标题】：Angular HttpClient unsubscribe [duplicate]

【发布时间】：2020-02-15 00:22:21

【问题描述】：

是否需要取消订阅Observable Angular HttpClient 的方法返回？

例如：

this.http.get(url).subscribe(x => this.doSomething());

我需要取消订阅此订阅吗？我问这是因为我不知道 Angular 是否自己处理它。另外，请求是一次性的，不是连续的。我倾向于认为我不需要。你有什么想法？

根据以下帖子： Angular/RxJs When should I unsubscribe from `Subscription`

RxJS 处理一次性订阅，但我在他们的文档中没有找到任何内容。

【问题讨论】：

也许您可以检查旧问题，看看它是否适合您的问题：***.com/questions/35042929/…

您无需取消订阅。它会一直观察直到得到 api 的响应。一旦它得到它就会取消订阅你发送的 HTTP 请求。

@sibabratswain 如果用户在响应返回之前离开当前组件怎么办？

@RinneHmm 感谢您的链接。这是很多有用的信息。

这应该被标记为重复，您已链接到问题中的答案。

【参考方案1】：

不，您无需取消订阅。它会一直观察直到得到 api 的响应。一旦 Http 请求完成，它就会自动取消订阅。

参考这个

Why not to unsubscribe Http Observables

Angular guide http

AsyncPipe

【讨论】：

如果用户在响应返回之前离开这个组件怎么办？我需要takeUntil() 模式吗？

Https 使用 AsyncPipe 作为响应，异步管道订阅 Observable 或 Promise 并返回它发出的最新值。当发出新值时，异步管道会标记要检查更改的组件。当组件被销毁时，异步管道会自动取消订阅以避免潜在的内存泄漏。因此，如果您在组件之间导航，它将自动取消订阅。

@sibrat swain, AsyncPipe 据我所知仅限于模板。很多时候，我需要在从服务器获取数据后做一些复杂的事情，在这种情况下 AsyncPipe 就不够用了。

@Antediluvian takeUntil() 会起作用，但我想你在这里不需要它。异步管道为您处理所有这些。那将是一个很好的做法，而不是取消订阅自己，让管道为您完成所有事情。它不会破坏您进行复杂操作的功能。

【参考方案2】：

您可以在使用 ngOnDestroy 离开页面的“同一时间”取消订阅页面中的所有 Observable。当您离开页面并关闭函数时，您可以通过管道传递一个 Observable。

export class X implements OnInit, OnDestroy 
  private unsubscribe$ = new Subject();

  ngOnInit() 
    this.functionOne();
  

  ngOnDestroy() 
    this.unsubscribe$.next();
    this.unsubscribe$.complete();
  

  functionOne() 
    this.service
      .getData()
      .pipe(takeUntil(this.unsubscribe$))
      .subscribe(
        (result) => ,
        (error) => 
      );    
  

【参考方案3】：

有两种处理方法：

1) 是的，如果您在 ts 文件中正常订阅 observable，则必须手动取消订阅。 通常我们可以在 ngOnDestroy() 生命周期方法中取消订阅

2) 如果你在 Angular 模板中的 observable 上使用异步管道语法，那么它会自动关闭订阅

observable | async 

参考以下： https://angular.io/api/common/AsyncPipe

【讨论】：

他只要求HttpClient而不是其他BehaviorSubject

我的意思是如果Observable 是我自己创建的，那么是的。我需要退订。但在这种特殊情况下，HttpClient 会为您创建它。而且我认为 Angular 没有关于我是否需要退订的文档。

它使用异步管道获取响应，异步管道订阅 Observable 或 Promise 并返回它发出的最新值。当发出新值时，异步管道会标记要检查更改的组件。当组件被销毁时，异步管道会自动取消订阅以避免潜在的内存泄漏。

【参考方案4】：

是的，需要按照https://blog.angularindepth.com/the-best-way-to-unsubscribe-rxjs-observable-in-the-angular-applications-d8f9aa42f6a0退订

这是我的工作：

export class CustomerSummaryComponent implements OnInit, OnDestroy 
  subscriptions: Subscription[];

  ngOnInit() 
    this.subscriptions = [];

    this.subscriptions.push(
        this.customerService.getCustomer(this.customerId).subscribe(
        data => 
        ,
        error => 
            console.log(error);
        
        )
    );
  

  ngOnDestroy() 
    for (const x of this.subscriptions) 
      x.unsubscribe();
    
  

【讨论】：

您的想法显然与其他人不同。但感谢您的链接。我一直在阅读那篇文章，但我认为它并没有特别谈到所讨论的场景。顺便说一句，我认为您可以将所有这些订阅添加到一个父级并从父级取消订阅，而不是取消订阅循环。