你需要取消订阅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());
            ...

当前回答

你们这些人在说什么!!

所以我们有两个理由取消订阅任何可观察对象。似乎没有人谈论非常重要的第二个原因!

清理资源。正如其他人所说,这对于HTTP可观察对象来说是一个可以忽略不计的问题。它会自己清理的。

阻止订阅处理程序运行。

注意,使用HTTP可观察对象,当你取消订阅时,它会在浏览器中为你取消底层请求(你会在网络面板中看到“取消”的红色部分)。这意味着不会浪费时间下载或解析响应。但这实际上是我下面主要观点的题外话。

2的相关性将取决于你的订阅处理程序做什么:

如果subscribe()处理函数有任何不希望看到的副作用 如果调用它的对象被关闭或被释放,那么你必须取消订阅(或添加条件逻辑)来阻止它被执行。

考虑以下几个案例:

一个登录表单。输入用户名和密码,然后点击“登录”。如果服务器很慢,而你决定按Escape键关闭对话框怎么办?你可能会假设你没有登录,但如果http请求在你点击escape之后返回,那么你仍然会执行你在那里的任何逻辑。这可能会导致重定向到帐户页面,设置不需要的登录cookie或令牌变量。这可能不是您的用户所期望的。 “发送电子邮件”表单。

如果订阅处理程序为'sendEmail'做了一些事情,如触发'您的电子邮件已发送'动画,将您转移到不同的页面或试图访问任何已处理的内容,您可能会得到异常或不想要的行为。

还要注意不要假定unsubscribe()表示“取消”。一旦HTTP消息在运行中unsubscribe()将不会取消HTTP请求如果它已经到达您的服务器。它只会取消返回给您的响应。邮件很可能会被发送出去。

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

一个被销毁/关闭的Angular组件。任何仍在运行的http可观察对象都将完成并运行它们的逻辑,除非你在onDestroy()中取消订阅。结果是否微不足道取决于您在订阅处理程序中所做的工作。如果你试图更新一些不存在的东西,你可能会得到一个错误。

有时,如果组件被释放,您可能需要一些操作,而有些则不需要。例如,你发出的电子邮件可能会发出“嗖嗖”的声音。你可能想要在组件关闭时播放这个,但是如果你试图在组件上运行动画,它会失败。在这种情况下,订阅内部的一些额外的条件逻辑将是解决方案-你不会想要取消订阅http可观察对象。

所以在实际问题的答案中,不,你不需要这样做来避免内存泄漏。但您需要(经常)这样做,以避免运行代码引发不必要的副作用,这些代码可能会抛出异常或破坏应用程序状态。

提示:订阅包含一个关闭的布尔属性,在高级情况下可能有用。对于HTTP,这将在它完成时设置。在Angular中,在某些情况下在ngDestroy中设置_isDestroyed属性可能会很有用,它可以被你的订阅处理程序检查。

技巧2:如果处理多个订阅,您可以创建一个特别的新订阅()对象,并向其添加(…)任何其他订阅-因此当您从主订阅中取消订阅时,它也将取消所有添加的订阅。

其他回答

调用unsubscribe方法更像是取消一个正在进行的HTTP请求,因为这个方法在底层XHR对象上调用abort方法,并在load和error事件上删除侦听器:

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

也就是说,取消订阅会删除听众……所以这可能是一个好主意,但我不认为这是必要的单一请求;-)

希望它能帮助到你, 亨利

取消订阅是必须的,如果你想在所有的网络速度上有一个确定的行为。

想象一下组件A是在一个选项卡中呈现的——你点击一个按钮发送一个“GET”请求。响应返回需要200毫秒。所以,你在任何时候都可以安全地关闭选项卡,因为机器会比你更快&在选项卡关闭和组件A被销毁之前处理并完成http响应。

How about on a very slow network? You click a button, the 'GET' request takes 10 seconds to receive its response, but 5 seconds into waiting you decide to close the tab. That will destroy component A to be garbage-collected at a later time. Wait a minute!, we did not unsubscribe -- now 5 seconds later, a response comes back and the logic in the destroyed component will be executed. That execution is now considered out-of-context and can result in many things including very low performance and data/state corruption.

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

注意:

RxJS不是Angular特有的 模板中使用的异步管道会在销毁时自动取消订阅 取消订阅多次没有负面影响,除了额外的无操作呼叫

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
  }
}

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

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

a . h .出口:有何不同

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

Angular大学:https://blog.angular-university.io/angular-http/

这种特殊类型的可观察对象是单值流:如果HTTP请求成功,这些可观察对象将只发出一个值,然后完成

而整个问题的答案是“我需要退订吗?”

视情况而定。 Http调用内存泄漏不是一个问题。 问题是回调函数中的逻辑。

例如:路由、登录。

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


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秒,用户离开登录视图,转到“支持视图”。

组件可能不是活动的,但订阅是活动的。在响应的情况下,用户将突然被重新路由(取决于您的handlerresponse()实现)。

这可不太好。

再想象一下,用户离开了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');
    });

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

为什么不总是退订呢?

假设您提出了一个put或post请求。服务器以任何一种方式接收消息,只是响应需要一段时间。取消订阅,不会撤销帖子或放。 但当您取消订阅时,您将没有机会处理响应或通知用户,例如通过对话或祝酒词/消息等。

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

这要看情况。如何处理这些问题是你的设计决定。

所以答案是不,你不需要。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自动退订时不会有泄漏!

值得一提的是:这个可观察对象被归类为有限的,与无限的可观察对象相反,无限的可观察对象是一个无限的数据流,可以像DOM点击侦听器一样发出。

谢谢@rubyboy的帮助。

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

如果在创建请求之后,但在接收到来自的应答之前 后端,您认为组件是不必要的,并销毁它,您的 订阅将这样维护对组件的引用 造成内存泄漏的机会。

更新

上面的断言似乎是正确的,但无论如何,当答案返回时,http订阅无论如何都会被销毁