如何将 get .pipe takeUntil 与 Angular 中的一个函数与 RxJX 结合使用?

Tom*_*ski 1 javascript frontend rxjs angular

在 Angular 中,每次需要查询端点时,都需要调用以下代码:

this.service.getSomeData()
 .pipe(takeUntil(this.onDestroy$))
 .subscribe((message: any) => { 
    some code here; 
 }
Run Code Online (Sandbox Code Playgroud)

takeUntil 是组件中的一个函数,用于在组件被销毁时取消订阅。

如何重构上面的代码,以便每次使用资源时都不需要键入所有这些内容?所以最后看起来像这样(或多或少?):

this.service.getSomeData(
   (message: any) => {
     some code here;
   }
)
Run Code Online (Sandbox Code Playgroud)

Yev*_*iuk 5

通常,在从视图/dom 卸载某些组件后,不必销毁/禁用您的服务。将它们视为一层代码来执行一些数据转换或获取。


问:为什么每个人都使用takeUntil(this.destroyed$)this.subscription.unsubscribe()

答:Observable只要有至少一个订阅者就可以生存。因此,如果您有一些长期存在的 observables 在某些操作后没有立即完成,您将有内存泄漏(Angular 可以多次创建/初始化每个组件)。说到Angularhttp,所有的getpostputdelete后端调用完成后,呼叫结束。这意味着你不必添加unsubscribeonDestroy钩或使用takeUntil

如果您已建立Websocket连接并正在收听某些消息,则您的流将变得持久,并且订阅此消息的每个组件都应onDestroy循环期间取消订阅。如果你不这样做,Angular 可以多次初始化你的组件(这通常发生在*ngIf=""语句中)并且多个订阅被创建但永远不会被销毁。这会导致内存泄漏。

不幸的是,这是大多数 Angular 项目的常见问题,可以通过手动unsubscribe/takeUntil或使用在组件销毁后async自动执行的管道来解决unsubscribe