Angular自动取消订阅RxJs

最新推荐文章于 2022-02-18 09:01:45 发布
最新推荐文章于 2022-02-18 09:01:45 发布
阅读量1.6k 收藏
点赞数
分类专栏： Angular入门到精通指南 文章标签： Angular自动取消订阅 angular rxjs订阅 rxjs自动取消订阅 angular取消订阅
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wf19930209/article/details/104939581
版权
本文探讨了Angular中如何处理RxJs订阅的取消，解释了何时需要手动取消订阅，特别是针对HttpClient请求和特定操作符的情况。介绍了ngx-autounsubscrb库作为自动取消订阅的解决方案，并详细说明了其安装和使用方法。
摘要由CSDN通过智能技术生成

Angular自动取消订阅RxJs

在使用 rxjs 时我们经常忘记调用unsubscribe()而导致内存泄露，很多时候你很难发现它，在RxJs官方有这样一段话：

What is a Subscription? A Subscription is an object that represents a disposable resource, usually the execution of an Observable. A Subscription has one important method,unsubscribe, that takes no argument and just disposes the resource held by the subscription

我们可以看出对于 Subscription 对象我们需要手动调用unsubscribe()取消订阅，这样就不会导致内存泄露。

下面我们讲讲什么时候该取消订阅。

Observable的取消订阅

Observable对象取消订阅有下面三种方式：

  • Observable完成值的发送，执行Observable.onComplete()。
  • Observable发生错误，执行Obser
了解本专栏 订阅专栏 解锁全文 超级会员免费看
FlyWine
关注
专栏目录
订阅专栏
【译】Angular自动取消订阅
weixin_33906657的博客
06-18 460
原文链接：https://netbasal.com/automagically-unsubscribe-in-angular-4487e9853a88 创建时间：2018-06-18 修改时间：2018-06-20 参与人员：@Zaynex，@我爱吃南瓜 如你所知，当你在 Javascript 中订阅一个 observable 或者事件时，你通常需要在特定的时候取消订阅以释放内存。否则，就会导...
Angular中优雅的处理RxJs自动取消订阅的方式以免出现内存泄露以及多次调用的问题
喻志强的博客
07-19 4664
Angular中深度集成了Rxjs，只要你使用Angular框架，你就不可避免的会接触到RxJs相关的知识。 在Android开发中，绝大多数的Android开发者都用过RxJava、RxAndroid或RxKotlin相关库。因其强大的操作符 以及 方便的线程切换 给我们日常开发提供了极大的便利。 但是，可能是前端并不像强类型语言那么严格，及时代码写的有点小问题，也是能照样运行，不仔细排查也发现不了什么影响。 在最近接触的Angular项目中，发现前端的小伙伴们很少去了解RxJs的原理，导致写的项目中，
Angular，RxJS 取消 interval 的一种方法
sumeiff的博客
04-14 1147
Angular中取消interval interval和其他Observable取消订阅的方式类似，也可以配合使用takeUntil。 RxJS官网的takeUntil代码： https://rxjs-dev.firebaseapp.com/api/operators/takeUntil import { fromEvent, interval } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; const source = inter
RxJS基础教程
JineD的博客
05-09 7464
RxJS是一个基于可观测数据流在异步编程应用中的库。 ReactiveX is a combination of the best ideas from theObserver pattern, theIterator pattern, andfunctional programming 正如官网所说，RxJS是基于观察者模式，迭代器模式和函数式编程。因此，首先要对这几个模式有所理解 观察者模式 window.addEventListener('click', function(){ c...
Angular框架中Ng Alain sf内容动态控制（隐藏对应sf的内容）
zonxxx的博客
11-25 1205
如：选择按总行汇总，进展示对应的sf项 使用change进行监听 ods: { type: 'string', title: '按总行汇总', enum: [ { label: '是', value: '1' }, { label: '否', value: '0' }, ], ui: { widget: 'select', chan
Angular之Http+RxJS之WebSocket(网络必备)
鸭绒的博客
04-02 2517
Get data from a server 在本教程中，您将在Angular的HttpClient的帮助下添加以下数据持久性特性。 HeroService通过HTTP请求获取英雄数据。用户可以通过HTTP添加、编辑和删除英雄并保存这些更改。 用户可以通过名字搜索英雄。 一、 启用HTTP服务 HttpClient是Angular用来通过HTTP与远程服务器通信的机制。 通过两个步骤使...
Angular---rxjs
weixin_43571751的博客
10-16 2314
Rxjs 简介 RxJS是一个主要用于处理异步程序的函数式编程库，可以把 RxJS 想成处理 异步行为 的 Lodash。 常见的异步行为 ajax，定时器，事件 常见的 优化异步回调的方式 Promise，async/await，rxjs 函数式编程 是一种编程思想的，就像面向过程、面向对象一样 比如： const result = (5 + 6) - 2 * 3; 函数式的写法： const add = (a, b) => a + b const mul = (a, b) => a * b
深入理解Angular4订阅(Subscribe)与取消
11-28
实际上，Angular确实会在组件销毁时自动取消订阅，例如在OnDestroy生命周期钩子中。但这并不意味着我们可以完全忽略手动取消订阅，尤其是当订阅在组件的其他生命周期钩子，如DoCheck中使用时。 在给出的代码片段中...
RxJS：所有订阅都需要调用 unsubscribe 取消订阅？
weixin_42910765的博客
10-11 1807
从此用 RxJS 订阅的时候，时刻都不忘调用 unsubscribe() 以防内存泄漏。对于结束 Observable，释放内存的方式有三种方式： 第一种，Observable 完成值的发送，执行 Observable.onComplete() 第二种，Observable 发生错误，执行 Observable.OnError() 第三种，订阅者主动取消订阅，执行 subscription.unsubscribe() 对于Observable.onComplete()和Observable.OnError(
angular Observable 怎么自动取消订阅
小妖666个人笔记
01-16 969
rxjs 的 Observable（可观察对象）极大的方便了我们的开发，但是当 subscribe（订阅） 没有多次时，前一个订阅没有取消，导致订阅方法被执行了多次。 ngOnInit(): void { this.query.select().subscribe((data) => { console.log(data); }); } 这种情况怎么办呢，可以手动取消订阅，但是有没有办法在 页面Destroy 后自动取消订阅呢？ 使用 until-destr
angular rxjs
Dの博客
05-23 722
1. ReactiveX 是一个使用可观察数据流的异步编程库 （响应式编程） RxJs 是 ReactiveX 在 Js 上的实现。 2. 2种编程范式 响应式编程： 数据生产者，主动推送（push） 数据给 数据消费者，数据消费者 被动接受 函数式编程： 数据消费者 从 数据生产者那里， 主动拉取/主动轮训 （pull）数据 参考文章-响应式编程 我们描述了两种获得上一个任务执行结果的...
Angular4订阅(Subscribe)与取消
热门推荐
微雨燕凝霜寒
11-18 2万+
声明以下内容仅仅为个人在自学过程中的理解，若有错误，麻烦您在评论区指出，我将及时更正，方便其他人，谢谢！订阅(Subscribe) 写过js的都知道，subscribe在很多地方都能看到它的身影，并且起到了很重要的作用。侦听http请求的返回，页面间传递参数… …说起订阅，就不能不提Observable，说起Observable就不能不提Subscribable… …等等，扯太远了。回到正题，sub
深入理解Angular订阅者模式
FlyWine的博客
02-23 6190
深入理解Angular订阅者模式 如果正在读此篇文章的你学过java,c++等面向对象语言，知道两个模式观察者模式和订阅者模式，分别为：Observer pattern，Pub-sub pattern(Subscriber) 接下来我们结合Angular来说明这两个模式。 Observer pattern This is a pattern of development in whi...
如何优雅的取消订阅-rxjs
weixin_33777877的博客
04-13 2626
rxjs中最头疼的莫非取消订阅的问题，其头疼程度不下于removeEventListener。本文试图探讨分析rxjs中取消订阅的几种方式，并做对比优劣分析及应用场景。 方案: 手动取消订阅 推荐*** 逻辑简单，需要额外引入变量保存，代码量大和维护难！ let sub = this.props$.subscribe(); // 当注销时取消订阅 sub.unsubscribe(); 复...
angular取消订阅
my_love_download的博客
04-07 517
之前的一篇文章有介绍到angular如何使用rxjs实现发布定阅,这里补充一下如何取下订阅,使用发布订阅可以很方便的解决一些页面之间交互,组件之间的交互问题,但是在使用之后一定记得要取消订阅,以防止过多订阅导致内存溢出 在angular中取消订阅放在生命周期函数ngOnDestroy---- 组件销毁的时候执行 取消订阅 ngOnDestroy() { this.$taskSever.unsu...
angular Rxjs异步获取数据，异步unsubscribe取消订阅，异步多次执行
qq_39962271的博客
02-18 924
一、异步获取数据 1、首先，进行Angular环境的搭建和项目创建 ctrl + c 结束服务 2、创建服务：request ng g service services/request 3、创建一个组件 ：home ng g component components/home 4、app.module.ts中引入并配置创建的服务和组件 import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/pla
angular2 rxjs 取消订阅的最佳实践
xhydongda的博客
04-24 371
对于非一次性的Observable的订阅，是需要释放的(模板html的async除外)，最佳实践是创建一个BaseComponent，为所有子类组件提供一个ngDestroyed$ Subject，在 ngOnDestroy() 勾子函数中执行next, complete，子类组件中只需takeUntil(ngDestroyed$)。 BaseComponent import...
Angular深入理解管道Pipe
FlyWine的博客
02-25 1万+
Angular深入理解管道 纯管道与非纯管道区别的本质 Pure Function Impure Function 内置Pipe pipe使用 自定义Pipe 管道性能优化 Angular深入理解管道 管道的链接 有学过linux shell的同学，应该知道管道，在shell中的管道是IPC,linux的进程间通讯有pipe,FIFO,signal...
Angular应用中何时及如何正确取消订阅
"本文主要探讨了Angular中何时应该取消订阅，以及如何在特定情况下正确地管理订阅以防止内存泄漏。" 在Angular应用中，当我们订阅Observables或注册事件监听器时，确保适时取消订阅是非常重要的。这是因为如果忘记...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

FlyWine

你的鼓励将是我创作的做大动力！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值