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

Posted on by hackdl

本文由庄汇晔同学编写~

在 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(){
letsubscription$=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

//inservicefile
@Injectable({
providedIn:'any',
})
exportclassMyComponentService{
publicdataSource=newBehaviorSubject(null);
....
}

//incomponentdataboardcaster
this.myComponentService.dataSource.next(...)

//incomponentdatasubscriber
this.myComponentService.dataSource.subscribe(...)

是否需要 unsubscribe：需要。

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

3、Form control，响应式表单的变化监听（例如：this.form.valueChanges.subscribe）

initForm(){
this.form=newFormGroup({...});
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(privateelement: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(privateroute:ActivatedRoute,privaterouter: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';

exportclassFooimplementsOnInit{
privatedestroy$=newSubject();
constructor(){}

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

uponComplete(){
console.log('Finallycompleted');
}

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(privatetitleService:TitleService){
ngOnInit(){
this.titleService.emitter1$
.pipe(takeWhile(()=>this.alive))
.subscribe((data:any)=>{/_...dosomething1_/})
}

ngOnDestroy(){
this.alive=false
}
}

take(n)： https://rxjs.dev/api/index/function/take

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

@Component({
...
})
exportclassAppComponentimplementsOnInit{
subscription$
ngOnInit(){
letobservable$=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({
...
})
exportclassAppComponentimplementsOnInit{
subscription$
ngOnInit(){
letobservable$=Rx.Observable.interval(1000);
this.subscription$=observable$.pipe(first()).
subscribe(x=>console.log(x))
}
}

2，使用 unsubscribe 方法

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

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

exportclassAppComponentimplementsOnInit,OnDestroy{
subscription1$:Subscription
subscription2$:Subscription
subscriptions:Subscription[]=[]
ngOnInit(){
varobservable1$=Rx.Observable.interval(1000);
varobservable2$=Rx.Observable.interval(400);
this.subscription1$=observable1$.subscribe(x=>
console.log("Frominterval1000",x)
);
this.subscription2$=observable2$.subscribe(x=>
console.log("Frominterval400",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:'

observable|async:Time:{{time|async}}
'
})
exportclassAsyncObservablePipeComponent{
time=newObservable((observer:Observer)=>{
setInterval(()=>observer.next(newDate().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

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

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: JavaWeb——第七章 前端工程化_2

第七章 前端工程化_2 六、Vue3视图渲染技术 6.1 模版语法 6.1.1 插值表达式和文本渲染 6.1.2 Attribute属性渲染 6.1.3 事件的绑定 6.2 响应式基础 6.2.1 响应式需求案例 6.2.2 响应式实现关键字ref 6.2.3…

服务器托管，北京服务器托管，服务器租用，机房机柜带宽租用

服务器托管

咨询：董先生

电话13051898268 QQ/微信93663045！

上一篇:
下一篇: