290

您是否需要取消订阅 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());
            ...
4

11 回答 11

312

所以答案是否定的，你没有。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因此，自动退订不会存在泄漏！

值得一提的是：这Observable被归类为finite，与之相反的是，可以像 DOM侦听infinite Observable器一样发出无限的数据流。click

谢谢，@rubyboy 在这方面的帮助。

于 2016-01-27T16:49:45.843 回答
160

你们在说什么！！！

好的，有两个理由取消订阅任何可观察的。似乎没有人谈论非常重要的第二个原因！

  1. 清理资源。正如其他人所说，这对于 HTTP observables 来说是一个可以忽略不计的问题。它只会自己清理。
  1. 阻止subscribe处理程序运行。

请注意，对于 HTTP 可观察对象，当您取消订阅时，它将在您的浏览器中为您取消底层请求（您将在网络面板中看到红色的“已取消”）。这意味着时间不会浪费在下载或解析响应上。但这实际上是我在下面的主要观点的旁白。

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

如果您的subscribe()处理程序函数有任何类型的副作用，如果任何调用它被关闭或处置，那么您必须取消订阅（或添加条件逻辑）以防止它被执行。

考虑几个案例：

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

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

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

还要注意不要假设unsubscribe()意味着“取消”。如果 HTTP 消息已经到达您的服务器，则一旦 HTTP 消息在进行中，unsubscribe()就不会取消 HTTP 请求。它只会取消返回给您的响应。并且电子邮件可能会被发送。

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

  1. 一个被销毁/关闭的 Angular 组件。除非您取消订阅onDestroy(). 结果是否微不足道取决于您在订阅处理程序中所做的事情。如果您尝试更新不再存在的内容，您可能会收到错误消息。

有时，如果组件被释放，您可能会有一些您想要的操作，而有些您不会。例如，您发送的电子邮件可能会发出“嗖嗖”声。即使组件已关闭，您也可能希望它播放，但如果您尝试在组件上运行动画，它将失败。在这种情况下，订阅中的一些额外条件逻辑将是解决方案 - 你不想取消订阅 http observable。

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

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

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

于 2018-08-14T22:48:08.287 回答
50

如果您希望在所有网络速度上都具有确定性行为，则必须取消订阅。

想象一下，组件 A 呈现在一个选项卡中 - 您单击一个按钮以发送一个“GET”请求。响应返回需要 200 毫秒。因此，您可以随时安全地关闭选项卡，因为您知道机器将比您更快，并且 http 响应已被处理，并且在选项卡关闭和组件 A 被破坏之前完成。

在非常慢的网络上怎么样？您单击一个按钮，“GET”请求需要 10 秒才能收到其响应，但等待 5 秒后您决定关闭该选项卡。这将破坏组件 A 以便稍后进行垃圾收集。 等一下！，我们没有取消订阅——现在5 秒后，一个响应回来了，被销毁的组件中的逻辑将被执行。现在考虑执行该执行out-of-context并可能导致许多事情，包括非常低的性能和数据/状态损坏。

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

笔记：

  • RxJS 不是 Angular 特定的
  • 模板中使用的角度async管道在销毁时自动取消订阅
  • 多次退订没有负面影响，除了额外的no-op调用
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
  }
}
于 2019-07-30T14:40:31.787 回答
27

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

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

也就是说，unsubscribe删除了听众......所以这可能是一个好主意，但我认为单个请求没有必要;-)

希望它可以帮助你，蒂埃里

于 2016-01-27T16:42:58.137 回答
20

经过一段时间的测试，阅读文档和 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() 实现）。

这不好。

还可以想象用户离开电脑，相信他还没有登录。但是您的逻辑使用户登录，现在您遇到了安全问题。

不退订可以做什么？

让您根据视图的当前状态调用：

  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');
    });

您不必取消订阅。您应该知道您的逻辑是否存在问题，这可能会导致您的订阅出现问题。并照顾好他们。在大多数情况下，这不是问题，但特别是在自动化等关键任务中，您应该注意意外行为，无论是“取消订阅”还是其他逻辑，如管道或条件回调函数。

为什么不总是退订？

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

这使用户相信 put/post 请求没有完成。

所以这取决于。如何处理这些问题是您的设计决定。

于 2020-03-01T21:48:04.757 回答
14

同样使用新的 HttpClient 模块，行为保持不变 包/common/http/src/jsonp.ts

于 2018-02-20T12:18:55.363 回答
8

你绝对应该阅读这篇文章。它向您展示了为什么即使从 http 也应该始终取消订阅。

如果在创建请求之后但在从后端收到答复之前，您认为该组件是不必要的并销毁它，您的订阅将保留对该组件的引用，从而产生导致内存泄漏的机会。

更新

上面的肯定似乎是真的，但无论如何，当答案回来时，http订阅无论如何都会被破坏

于 2019-03-13T09:16:48.700 回答
7

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

于 2018-07-04T14:59:39.943 回答
0

我构建了一个完整的大型企业应用程序，相信 httpclient 会自动取消订阅，并且我没有遇到任何内存泄漏。

于 2022-02-22T08:17:50.493 回答
0

A good part that could help understand this is that an HTTP request isn't made unless there is a call to the subscribe function. Though the answers on this page seem to suggest two different practices, it really doesn't makes much of a difference as the required behavior would be controlled by an async pipe, as indicated by the angular docs (though it's mentioned much later in the section 'Making a DELETE request'):

The AsyncPipe subscribes (and unsubscribes) for you automatically.

In fact, it's even harder to find any example in docs where such observables are explicitly unsubscribed by calling the unsubscribe function.

于 2021-03-25T16:19:39.667 回答
-2

RxJS observable 基本上是相关联的，并且在您订阅它时会相应地工作。当我们创建 observable 并完成它的移动时，observable 会自动关闭和取消订阅。

它们以与观察者相同的方式工作，但顺序完全不同。当组件被破坏时取消订阅它们的更好做法。我们随后可以通过例如这样做。this.$manageSubscription.unsubscibe()

如果我们创建了像下面提到的语法这样的 observable，例如

** return new Observable((observer) => { ** // 它使 observable 处于冷态 ** observer.complete() **}) **

于 2018-08-12T11:39:35.480 回答