unsubscribe:Angular 项目中常见场景以及是否需要 unsubscribe

news2024/11/13 15:53:37

本文由庄汇晔同学编写~

在 Angular 项目中,经常会使用到 observable subscribe,但是 subscribe 读取了数据之后,真的就是万事大吉了吗?这个问题的答案或许是,或许不是。有些 observable 需要 unsubscribe,而有些并不用。在接下来的文章里,我会介绍:

  • observable 的种类:何种 observable 需要 unsubscribe,以及没有 unsubscribe 会造成什么样的问题。
  • 在 angular 项目中,可能会遇到的observable 的场景,以及他们是否需要 unsubscribe,为什么需要/不需要?
  • unsubscribe 的方法。

一、observable 的种类:何种 observable 需要 unsubscribe,以及没有unsubscribe 会造成什么样的问题。

从 observable 能否结束(complete)的角度来看,observable 分为两类:finite observable(有限事件流)和 infinite observable(无限事件流)。区分他们的方法很简单:即 finite observable 只能 emit 一个值(或是一个错误),随即结束。而 infinite observable 会 emit 多个值,而不会结束。

finite Observable 的例子有:http client request,infinite Observable 的例子有:DOM eventListener。如果不取消订阅,将会出现内存泄漏,执行意料之外回调函数的问题。所以,一定需要 unsubscribe 的是 infinite observable(无限事件流),而 finite observable(有限事件流)一般不需要 unsubscribe。

二、在 angular 项目中,可能会遇到的 subscribe 的场景,他们需要 unsubscribe 吗?为什么需要/不需要?

1、Http Client 请求(this.httpClient.get(…).subscribe)

fetchFromBackend() {
  let subscription$ = this.http.get(`http://example.com`).subscribe(...)
}

是否需要 unsubscribe:视情况而定。

原因:http client 为有限事件流,当 Observable complete 后,angular 会自动关闭 Observable。由于 unsubscribe http client request 并不意味着取消请求,而是取消了返回数据后的回调函数,所以需要根据场合来取消 subscription。如果在回调函数中,如果有会造成内存泄漏的代码,则严格意义上来说,应该需要 unsubscribe

更多详情请移步阅读:https://medium.com/angular-in-depth/why-you-have-to-unsubscribe-from-observable-92502d5639d0

2、Component 之间传递信息使用的 Behavior subject

// in service file
@Injectable({
  providedIn: 'any',
})
export class MyComponentService {
  public dataSource = new BehaviorSubject < any > (null);
  ....
}

// in component data boardcaster
this.myComponentService.dataSource.next(...)

// in component data subscriber
this.myComponentService.dataSource.subscribe(...)

是否需要 unsubscribe:需要。

原因:这种为无限事件流,无法预期它的回调函数会造成什么样的问题,所以需要 unsubscribe

3、Form control,响应式表单的变化监听(例如:this.form.valueChanges.subscribe)

initForm() {
  this.form = new FormGroup({ ...});
  this.valueChanges = this.form.valueChanges.subscribe(...);
}

是否需要 unsubscribe:需要。

原因:这种为无限事件流,虽然 component unmount 后,form 也不存在,但是这样会造成内存泄漏,导致性能下降等问题。

4、Dom 中的 fromEvent 事件监听(例如:Observable.fromEvent(this.element.nativeElement, ‘click’).subscribe)

@ViewChild('myElement', { static: false })
myElement: ElementRef;
constructor(private element : ElementRef) { }

click: Subscription;

ngOnInit() {
  this.click = Observable.fromEvent(this.myElement.nativeElement, 'click').subscribe(...);
}

是否需要 unsubscribe:需要。

原因:这种为无限事件流,虽然 component unmount 后,dom element 不存在,但是这样会造成内存泄漏,导致性能下降等问题。

5、router 变化事件(例如:this.route.queryParams.subscribe)

constructor(private route: ActivatedRoute, private router: Router) {
  this.route.params.subscribe(console.log);
  this.route.queryParams.subscribe(console.log);
  this.route.fragment.subscribe(console.log);
  this.route.data.subscribe(console.log);
  this.route.url.subscribe(console.log);
  
  this.router.events.subscribe(console.log);

}

是否需要 unsubscribe:需要。

原因:这种为无限事件流,如果不 unsubscribe,会运行错误的回调函数,造成不可控的问题

三、unsubscribe 的方法

1,使用 rxjs takeUntil,takeWhile,take(n),first operator:

简介:rxjs take 系列的 operator 可以限定取得 Observable emit 的次数或者时机,当次数或时机不符合时,Observable 就会走向完成状态。所以,在 angular 项目中,可以灵活利用组件的生命周期函数,使得组件需要 unsubscribe 的 Observable 在组件销毁时,自动完成。first operator 则和 take(1)类似,是只取得第一个 emit 值,随后完成。

takeUntil: https://rxjs.dev/api/index/function/takeUntil

takeUntil(notifier: ObservableInput)会一直监听他的数据源,直到 notifier Observable emit 一个值

import { Subject, takeUntil } from 'rxjs';

export class Foo implements OnInit {
  private destroy$ = new Subject();
  constructor() { }

  ngOnInit(): void {
    this.auth.fireAuthUser$
      .pipe(takeUntil(this.destroy$))
      .subscribe({
        next: (data) => console.log(data),
        complete: () => this.uponComplete(),
      });
  }

  uponComplete() {
    console.log('Finally completed');
  }

  ngOnDestroy() {
    this.destroy$.next(true);
    this.destroy$.complete();
  }
}
takeWhile: https://rxjs.dev/api/index/function/takeWhile

与 takeUnitl 类似,只是 takeUnitl 的参数是一个判断函数,而 takeWhile 的参数是一个 Observable export class ViewRouteComponent implements OnInit, OnDestroy { alive: boolean = true

constructor(private titleService: TitleService) {
  ngOnInit() {
    this.titleService.emitter1$
      .pipe(takeWhile(() => this.alive))
      .subscribe((data: any) => { /_ ... do something 1 _/ })
  }

  ngOnDestroy() {
    this.alive = false
  }
}
take(n): https://rxjs.dev/api/index/function/take

在取得 n 次 emit 之后,Observable 会自动完成

@Component({
  ...
  })
export class AppComponent implements OnInit {
  subscription$
  ngOnInit() {
    let observable$ = Rx.Observable.interval(1000);
    this.subscription$ = observable$.pipe(take(1)).
      subscribe(x => console.log(x))
  }
}
first: https://rxjs.dev/api/index/function/first

在取得第一次 emit 后,Observable 自动完成

@Component({
  ...
  })
export class AppComponent implements OnInit {
  subscription$
  ngOnInit() {
    let observable$ = Rx.Observable.interval(1000);
    this.subscription$ = observable$.pipe(first()).
      subscribe(x => console.log(x))
  }
}

2,使用 unsubscribe 方法

使用 unsubscribe 方法是非常直观的一种方式,只需在 angular 组件的 ngOnDesrtoy 中调用即可。

这里的例子使用了一个 subscription array,在 ngOnDestroy 中 unsubscribe

export class AppComponent implements OnInit, OnDestroy {
  subscription1$: Subscription
  subscription2$: Subscription
  subscriptions: Subscription[] = []
  ngOnInit() {
    var observable1$ = Rx.Observable.interval(1000);
    var observable2$ = Rx.Observable.interval(400);
    this.subscription1$ = observable1$.subscribe(x =>
      console.log("From interval 1000", x)
    );
    this.subscription2$ = observable2$.subscribe(x =>
      console.log("From interval 400", x)
    );
    this.subscriptions.push(this.subscription1$);
    this.subscriptions.push(this.subscription2$);
  }
  ngOnDestroy() {
    this.subscriptions.forEach((subscription) =>
      subscription.unsubscribe()
      );
  }
}

3,使用 async pipe

官方文档:https://angular.io/api/common/AsyncPipe

使用这种方式可以无需手动 unsubscribe,也不用担心内存泄漏的问题。但是它的局限性也在于,它只能被使用在模版(template)中。请考虑如下场景:在用户点击按钮后,需要提交一个表单。此时,使用 async pipe 则变得不怎么合适了。

@Component({
  selector: 'async-observable-pipe',
  template: '<div><code>observable|async</code>: Time: {{ time | async }}</div>'
})
export class AsyncObservablePipeComponent {
  time = new Observable < string > ((observer: Observer<string>) => {
    setInterval(() => observer.next(new Date().toString()), 1000);
  });
}

补充:如何查看组件销毁后,是否存在 unsubscribe 的 subscription?

方法 1:从静态代码检查中规避

使用 eslint 工具,配置 rxjs-no-ignored-subscription 规则:https://github.com/cartant/eslint-plugin-rxjs/blob/main/docs/rules/no-ignored-subscription.md

方法 2:使用堆快照查看内存泄漏

例子中想要查看内存泄漏的组件是 MonthlyReportComponent,此时使用开发者工具,在加载组件前使用快照功能,并搜索组件名称,是看不到内存泄漏的
在这里插入图片描述

在组件加载后,unmount,再次捕捉快照,再次搜索组件名称,查看堆快照:

在这里插入图片描述

查看里面是否有 BehaviorSubject,Observable 等未取消订阅的对象
在这里插入图片描述

参考文档:

http client:

https://stackoverflow.com/questions/35042929/is-it-necessary-to-unsubscribe-from-observables-created-by-http-methods

https://stackoverflow.com/questions/38008334/angular-rxjs-when-should-i-unsubscribe-from-subscription

https://medium.com/angular-in-depth/why-you-have-to-unsubscribe-from-observable-92502d5639d0

如何 unsubscribe:

https://stackoverflow.com/questions/41364078/angular-2-does-subscribing-to-formcontrols-valuechanges-need-an-unsubscribe

https://blog.bitsrc.io/6-ways-to-unsubscribe-from-observables-in-angular-ab912819a78f

https://benlesh.medium.com/rxjs-dont-unsubscribe-6753ed4fda87

https://stackoverflow.com/questions/69333761/angular-12-rxjs-safe-to-use-takewhile-without-ondestroy

https://stackoverflow.com/questions/38008334/angular-rxjs-when-should-i-unsubscribe-from-subscription

如何查看存在 unsubscribe:

https://itnext.io/angular-rxjs-detecting-memory-leaks-bdd312a070a0

关于 OpenTiny

图片

OpenTiny 是一套企业级 Web 前端开发解决方案,提供跨端、跨框架、跨版本的 TinyVue 组件库,包含基于 Angular+TypeScript 的 TinyNG 组件库,拥有灵活扩展的低代码引擎 TinyEngine,具备主题配置系统TinyTheme / 中后台模板 TinyPro/ TinyCLI 命令行等丰富的效率提升工具,可帮助开发者高效开发 Web 应用。


欢迎加入 OpenTiny 开源社区。添加微信小助手:opentiny-official 一起参与交流前端技术~更多视频内容也可关注B站、抖音、小红书、视频号
OpenTiny 也在持续招募贡献者,欢迎一起共建

OpenTiny 官网:https://opentiny.design/
OpenTiny 代码仓库:https://github.com/opentiny/
TinyVue 源码:https://github.com/opentiny/tiny-vue
TinyEngine 源码: https://github.com/opentiny/tiny-engine

欢迎进入代码仓库 Star🌟TinyEngine、TinyVue、TinyNG、TinyCLI~
如果你也想要共建,可以进入代码仓库,找到 good first issue标签,一起参与开源贡献~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1484444.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

递归回溯剪枝-括号生成

LCR 085. 括号生成 - 力扣&#xff08;LeetCode&#xff09; 一. 根据题意&#xff0c;分析出符合要求的括号组合需要满足以下两个条件&#xff1a; 1. 左括号数或者右括号数都不能超过 n&#xff1b; 2. 从最左侧开始的每一个子集&#xff0c;不可以出现右括号数大于左括号数&…

GEE必须会教程—蒸散发数据时间序列分析与下载

今天带来的有关蒸散发数据的下载代码&#xff0c;蒸散发数据在气象气候&#xff0c;农业干旱监测等领域应用广泛&#xff0c;那么在GEE上如何方便快捷获取蒸散发数据呢&#xff1f;今天跟着小编分享代码&#xff0c;快来学习吧&#xff01;&#xff01; A.定义研究区域 //定义…

力扣每日一题 受限条件下可到达节点的数目 DFS

Problem: 2368. 受限条件下可到达节点的数目 文章目录 思路复杂度Code 思路 &#x1f468;‍&#x1f3eb; 灵神 复杂度 时间复杂度: O ( n ) O(n) O(n) 空间复杂度: O ( n ) O(n) O(n) Code class Solution {int ans 0;boolean[] set;List<Integer>[] es;publ…

【Python】2. 基础语法

常量和表达式 我们可以把 Python 当成一个计算器, 来进行一些算术运算. 注意: print 是一个 Python 内置的 函数, 这个稍后详细介绍. 可以使用 - * / ( ) 等运算符进行算术运算. 先算乘除, 后算加减. 运算符和数字之间, 可以没有空格, 也可以有多个空格. 但是一般习惯上写一…

【兔子机器人】根据自身机器人参数修改simulink模型

关节电机 机体初始高度 &#xff01;&#xff01;&#xff01;接下来尝试修改各腿的坐标朝向

USB - Linux Kernel Menuconfig

Linux kernel&#xff0c;make menuconfig&#xff0c;和USB相关的&#xff0c;在主菜单选择Device Drivers。 Device Drivers下面&#xff0c;找到USB support。 在USB support下面&#xff0c;就可以对USB相关的item进行设置。 按照从上到下的顺序&#xff0c;打开的设置依次…

nginx,php-fpm

一&#xff0c;Nginx是异步非阻塞多进程&#xff0c;io多路复用 1、master进程&#xff1a;管理进程 master进程主要用来管理worker进程&#xff0c;具体包括如下4个主要功能&#xff1a; &#xff08;1&#xff09;接收来自外界的信号。 &#xff08;2&#xff09;向各worker进…

Scrapy与分布式开发(1.1):课程导学

Scrapy与分布式开发&#xff1a;从入门到精通&#xff0c;打造高效爬虫系统 课程大纲 在这个专栏中&#xff0c;我们将一起探索Scrapy框架的魅力&#xff0c;以及如何通过Scrapy-Redis实现分布式爬虫的开发。在本课程导学中&#xff0c;我们将为您简要介绍课程的学习目标、内容…

php儿童服装销售管理系统计算机毕业设计项目包运行调试

php mysql儿童服装销售网 功能&#xff1a;前台后台 前台&#xff1a; 1.服装资讯 文章标题列表 详情 2.服装选购中心 分页查看图文列表 详情 3.用户注册 登陆 退出 4.服装加入收藏 5.加入购物车 6.对服装进行评论 会员中心&#xff1a; 1.我的账户 查看 修改 2.我的收藏 查看 …

Linux shell:补充命令的使用

目录 一.导读 二.正文 三.结语 一.导读 上一篇介绍了脚本的简单概念以及使用&#xff0c;现在补充一些命令。 二.正文 目前处于全局目录&#xff0c;通过mkdir创建名我为day01的文件。 通过cd命令day01 切换至day01文件当中。 使用vim文本编辑器文件名&#xff08;firstdir&…

【JavaEE】_前端使用GET请求的queryString向后端传参

目录 1. GET请求的query string 2. 关于query string的urlencode 1. GET请求的query string 1. 在HttpServletRequest请求中&#xff0c;getParameter方法用于在服务器这边获取到请求中的参数&#xff0c;主要在query string中&#xff1b; query string中的键值对都是程序…

接口详细说明

接口概述 接口也是一种规范 接口的定义与特点 接口的格式如下&#xff1a; //接口用关键字interface来定义 public interface 接口名 {// 常量// 抽象方法 } JDK8之前接口中只能是抽象方法和常量&#xff0c;没有其他成分了。 接口不能实例化。 接口中的成员都是public修…

[Redis]——初识Redis

一、Redis为非关系型数据库 ❓我们常见的MySQL、SQLServer都是关系型数据库&#xff0c;那他们之间有什么区别与联系呢&#xff1f; &#x1f4d5;关系型数据库与非关系型数据库的区别&#xff08;面试题&#xff09; 解释&#xff1a; SQL数据库中的表是有结构的&#xff0c;包…

DataIntegrityViolationException异常产生原因及解决方案

DataIntegrityViolationException异常产生原因及解决方案 01 异常的发生场景 在我新写了一个接口之后出现的 //org.springframework.dao.DataIntegrityViolationException日志报错的意思是参数设置了一个错误的值 02 异常的产生及其原因 我最开始认为是MySQL数据库表设计…

ShardingJdbc实战-分库分表

文章目录 基本配置分库分表的分片策略一、inline 行表达时分片策略algorithm-expression行表达式完整案例和配置如下 二、根据实时间日期 - 按照标准规则分库分表标准分片 - Standard完整案例和配置如下 基本配置 逻辑表 逻辑表是指&#xff1a;水平拆分的数据库或者数据表的相…

应用层http协议包解析与https加密策略解析

文章目录 一.应用层协议--http协议基础认知二.https协议加密策略解析加密策略1--通信双方只使用对称加密加密策略2--通信双方使用单方非对称加密加密策略3--通信双方都使用非对称加密加密策略4--非对称加密与对称加密配合使用中间人攻击数据签名与CA证书HTTPS数据安全认证的本质…

Java基于SpringBoot网上超市的设计与实现论文

摘 要 网络技术和计算机技术发展至今&#xff0c;已经拥有了深厚的理论基础&#xff0c;并在现实中进行了充分运用&#xff0c;尤其是基于计算机运行的软件更是受到各界的关注。加上现在人们已经步入信息时代&#xff0c;所以对于信息的宣传和管理就很关键。因此超市商品销售信…

外贸业务员没客户的7大原因+解决办法!

业务员没有客户&#xff0c;就是无源之水&#xff0c;无本之木&#xff0c;这自然也就没有业绩。那些吃空饷的业务员&#xff0c;迟早会拖垮公司。所以不管是什么原因导致的业务员没客户&#xff0c;都要一一查验清楚。七个业务员没有客户的原因&#xff0c;七种对策&#xff0…

小朋友来自多少小区 - 华为OD统一考试(C卷)

OD统一考试&#xff08;C卷&#xff09; 分值&#xff1a; 100分 题解&#xff1a; Java / Python / C 题目描述 幼儿园组织活动&#xff0c;老师布置了一个任务&#xff1a; 每个小朋友去了解与自己同一个小区的小朋友还有几个。 我们将这些数量汇总到数组 garden 中。 请…

IEEE754标准的c语言阐述,以及几个浮点数常量

很多年前&#xff0c;调研过浮点数与整数之间的双射问题&#xff1a; win7 intel x64 cpu vs2013 c语言浮点数精度失真问题 最近重新学习了一下IEEE754标准&#xff0c;也许实际还有很多深刻问题没有被揭示。 计算机程序设计艺术&#xff0c;据说这本书中也有讨论。 参考&…