Question

您是否需要取消订阅Angular 2 http调用以防止内存泄漏？

 fetchFilm(index) {
        var sub = this._http.get(`http://example.com`)
            .map(result => result.json())
            .map(json => {
                dispatch(this.receiveFilm(json));
            })
            .subscribe(e=>sub.unsubscribe());
            ...

Answer 1

所以答案是否定的，你不是。 Ng2会自行清理它。

Http服务源，来自Angular的Http XHR后端源：

注意在获得结果后它如何运行complete()。这意味着它实际上取消订阅完成。所以你不需要自己做。

这是一个验证测试：

  fetchFilms() {
    return (dispatch) => {
        dispatch(this.requestFilms());

        let observer = this._http.get(`${BASE_URL}`)
            .map(result => result.json())
            .map(json => {
                dispatch(this.receiveFilms(json.results));
                dispatch(this.receiveNumberOfFilms(json.count));
                console.log("2 isUnsubscribed",observer.isUnsubscribed);
                window.setTimeout(() => {
                  console.log("3 isUnsubscribed",observer.isUnsubscribed);
                },10);
            })
            .subscribe();
        console.log("1 isUnsubscribed",observer.isUnsubscribed);
    };
}

正如预期的那样，您可以看到在获得结果并完成可观察操作符后，它总是自动取消订阅。这是在超时（＃3）时发生的，因此我们可以在完成并完成后观察可观察的状态。

结果

因此，Ng2 auto unsubscribes不存在泄漏！

很高兴提及：此Observable被归类为finite，与infinite Observable相反，click ExR(1, 1) = WDR ' place at Excel cursor可以像DOM {{{}}那样发出无限的数据流例如，听众。

感谢@rubyboy的帮助。

Answer 2

你们在说什么！！！

好的，所以有两个原因取消订阅任何可观察的消息。似乎没人在谈论第二个！

1）清理资源。正如其他人所说，对于HTTP可观察对象来说，这是可以忽略的问题。它会自行清理。

2）阻止运行subscribe处理程序。（对于HTTP来说，这实际上还会取消浏览器中的请求-这样就不会浪费时间阅读响应。但这实际上是我在下面要讲的内容之一。）

数字2的相关性将取决于您的订阅处理程序的工作：

如果您的subscribe()处理函数具有任何不希望的副作用如果有任何调用将其关闭或处置，则必须取消订阅（或添加条件逻辑）以防止其执行。

考虑一些情况：

1）登录表单。输入用户名和密码，然后单击“登录”。如果服务器运行缓慢并且您决定按Escape键关闭对话框怎么办？您可能会假设您尚未登录，但是如果在转义后返回了http请求，那么您仍将执行那里的任何逻辑。这可能导致重定向到帐户页面，设置了不需要的登录cookie或令牌变量。这可能不是您的用户所期望的。

2）“发送电子邮件”表格。

如果'sendEmail'的subscribe处理程序执行触发“您的电子邮件已发送”动画之类的操作，将您转移到其他页面或尝试访问已处置的任何内容，则可能会出现异常或不良行为。

还请注意不要假设unsubscribe()的意思是“取消”。运行HTTP消息后，unsubscribe()将不会取消HTTP请求（如果已经到达您的服务器）。它只会取消返回给您的响应。电子邮件可能会被发送。

如果创建订阅以直接在UI组件内发送电子邮件，则可能希望取消订阅处理，但是如果电子邮件是由非UI集中式服务发送的，则可能不需要。

3）被破坏/关闭的Angular组件。除非您在onDestroy()中取消订阅，否则当时仍在运行的所有HTTP可观察对象都将完成并运行其逻辑。结果是否琐碎取决于您在订阅处理程序中执行的操作。如果您尝试更新不存在的内容，则可能会出错。

有时候，如果组件被处置，您可能会希望执行某些操作，而有些则不需要。例如，对于发送的电子邮件，您可能会发出“ s”的声音。即使关闭了组件，您可能也希望播放该动画，但是如果尝试在组件上运行动画，则动画将失败。在这种情况下，可以使用订阅中的一些附加条件逻辑来解决-您将不想取消订阅可观察的http。

因此，回答实际问题时，不需要这样做以避免内存泄漏。但是（通常）您需要这样做，以避免运行代码可能会引发异常或破坏应用程序状态而触发不必要的副作用。

提示：Subscription包含一个closed布尔属性，在高级情况下可能有用。对于HTTP，它将在完成时设置。在Angular中，在某些情况下在_isDestroyed中设置ngDestroy属性可能会有用，subscribe处理程序可以检查该属性。

提示2：如果要处理多个订阅，则可以创建一个临时new Subscription()对象和add(...)该对象的任何其他订阅-因此，当您取消订阅主要对象时，它将取消订阅所有添加的订阅

Answer 3

调用unsubscribe方法是取消正在进行的HTTP请求，因为此方法调用基础XHR对象上的abort并删除有关加载和错误事件的侦听器：

// From the XHRConnection class
return () => {
  _xhr.removeEventListener('load', onLoad);
  _xhr.removeEventListener('error', onError);
  _xhr.abort();
};

那就是说，unsubscribe删除了听众......所以这可能是一个好主意，但我不认为这对单个请求是必要的; - ）

希望它可以帮到你，亨利

Answer 4

经过一段时间的测试，阅读HttpClient的文档和源代码。

HttpClient: https://github.com/angular/angular/blob/master/packages/common/http/src/client.ts

HttpXhrBackend : https://github.com/angular/angular/blob/master/packages/common/http/src/xhr.ts

HttpClientModule：https://indepth.dev/exploring-the-httpclientmodule-in-angular/

角度大学：https://blog.angular-university.io/angular-http/

这种特殊类型的Observable是单值流：如果HTTP请求成功，则这些Observable将仅发出一个值，然后完成

要取消订阅“我需要”整个问题的答案吗？

要视情况而定。 Http调用Memoryleaks不是问题。问题是回调函数中的逻辑。

例如：路由或登录。

如果您的呼叫是登录呼叫，则不必“取消订阅”，但需要确保用户是否离开页面，在没有用户的情况下可以正确处理响应。


this.authorisationService
      .authorize(data.username, data.password)
      .subscribe((res: HttpResponse<object>) => {
          this.handleLoginResponse(res);
        },
        (error: HttpErrorResponse) => {
          this.messageService.error('Authentication failed');
        },
        () => {
          this.messageService.info('Login has completed');
        })

从烦人到危险

现在想像一下，网络速度比平常慢，通话时间要长5秒钟，并且用户离开登录视图并进入“支持视图”。

该组件可能不是活动的，但是订阅。如果有响应，则用户将被突然重新路由（取决于您的handleResponse（）实现）。

这不好。

也可以想象用户离开PC，以为他尚未登录。但是您的逻辑使用户登录，现在您遇到了安全问题。

不取消订阅怎么办？

根据视图的当前状态进行调用：

  public isActive = false;
  public ngOnInit(): void {
    this.isActive = true;
  }

  public ngOnDestroy(): void {
    this.isActive = false;
  }

用户.pipe(takeWhile(value => this.isActive))，以确保仅在视图处于活动状态时才处理响应。


this.authorisationService
      .authorize(data.username, data.password).pipe(takeWhile(value => this.isActive))
      .subscribe((res: HttpResponse<object>) => {
          this.handleLoginResponse(res);
        },
        (error: HttpErrorResponse) => {
          this.messageService.error('Authentication failed');
        },
        () => {
          this.messageService.info('Login has completed');
        })

但是如何确定订阅不会引起内存泄漏？

您可以记录是否应用了“ teardownLogic”。

当订阅为空或取消订阅时，将调用订阅的teardownLogic。


this.authorisationService
      .authorize(data.username, data.password).pipe(takeWhile(value => this.isActive))
      .subscribe((res: HttpResponse<object>) => {
          this.handleLoginResponse(res);
        },
        (error: HttpErrorResponse) => {
          this.messageService.error('Authentication failed');
        },
        () => {
          this.messageService.info('Login has completed');
    }).add(() => {
        // this is the teardown function
        // will be called in the end
      this.messageService.info('Teardown');
    });

您不必退订。您应该知道逻辑中是否存在问题，这可能会导致订阅问题。并照顾他们。在大多数情况下，这不是问题，但是特别是在诸如自动处理之类的关键任务上，您应该注意意外的行为，无论是否带有“取消订阅”或其他逻辑（例如管道或条件回调函数）。

为什么不总是退订？

想象一下您提出了放置或发布请求。服务器以任何一种方式接收消息，只是响应需要一段时间。取消订阅，不会撤消帖子或放置。但是，当您退订时，您将没有机会处理响应或通知用户，例如通过Dialog或Toast / Message等。

这会使用户相信未完成放置/发布请求。

这取决于。这是您的设计决策，如何处理此类问题。

Answer 5

同样使用新的HttpClient模块，仍然保持相同的行为

Answer 6

您不应取消订阅自动完成的可观察对象（例如Http，调用）。但是有必要取消订阅Observable.timer()之类的无限可观测对象。

Answer 7

如果您希望在所有网络速度上都具有确定性行为，则

退订是必须。

想象，组件A在选项卡中呈现-您单击按钮以发送“ GET”请求。恢复响应需要200毫秒。因此，您可以随时安全地关闭选项卡，因为它知道，计算机的运行速度比您快，并且在关闭选项卡和销毁组件A之前，http响应已完成并且已完成。

在速度非常慢的网络上如何？？单击按钮，“ GET”请求需要10秒钟才能收到响应，但是等待5秒钟就可以决定关闭标签。这将销毁要在以后垃圾回收的组件A。 请稍等！，我们没有取消订阅-现在5秒钟后，响应返回，并且将执行销毁组件中的逻辑。现在，该执行被视为out-of-context，并可能导致很多事情，包括非常低的性能。

因此，最佳实践是在组件销毁时使用takeUntil()并取消订阅http调用。

import { Component, OnInit, OnDestroy } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

interface User {
  id: string;
  name: string;
  age: number;
}

@Component({
  selector: 'app-foobar',
  templateUrl: './foobar.component.html',
  styleUrls: ['./foobar.component.scss'],
})
export class FoobarComponent implements OnInit, OnDestroy {
  private user: User = null;
  private destroy$ = new Subject();

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http
      .get<User>('api/user/id')
      .pipe(takeUntil(this.destroy$))
      .subscribe(user => {
        this.user = user;
      });
  }

  ngOnDestroy(): void {
    this.destroy$.next();  // trigger the unsubscribe
    this.destroy$.complete(); // finalize & clean up the subject stream
  }
}

Answer 8

您绝对应该阅读this文章。它向您展示了为什么您甚至应该始终从http退订。

如果在创建请求之后但在收到请求的答复之前后端，您认为该组件是不必要的，并销毁它，您的订阅将保持对组件的引用，因此造成内存泄漏的机会。

更新

上面的确认似乎是正确的，但是无论如何，当答案返回时，http订阅仍然会被破坏

Answer 9

可以帮助理解这一点的一个很好的部分是，除非调用 subscribe 函数，否则不会发出 HTTP 请求。尽管此页面上的答案似乎暗示了两种不同的做法，但实际上并没有多大帮助不同之处在于所需的行为将由异步管道控制，如角度 docs 所示（尽管稍后在“发出 DELETE 请求”一节中提到了这一点）：

AsyncPipe 会自动为您订阅（和取消订阅）。

事实上，在文档中更难找到通过调用 unsubscribe 函数明确取消订阅此类 observable 的任何示例。

Answer 10

可观察的RxJS基本上是相关联的，因此您订阅它就可以相应地工作。当我们创建可观察对象并完成移动时，可观察对象会自动关闭并取消订阅。

我们不必显式调用unsubscribe方法。您可以使用封闭方法来检查可观察状态。

是否有必要取消订阅由Http方法创建的可观察对象？

10 个答案:

你们在说什么！！！