担心使用相同的代码订阅两次然后退订答案

【问题标题】：Concerned about subscribing twice with the same code and then unsubscribing担心使用相同的代码订阅两次然后退订
【发布时间】：2022-11-12 09:56:30
【问题描述】：

可以说我有一个像下面这样的函数，它通过在我的组件中单击按钮来调用。

如果我在第一个和第二个订阅上单击我的按钮两次会怎样？
如果我在我的 ngOnDestroy() 中单击我的按钮两次然后取消订阅 mySub 会发生什么？
如果该函数有可能被调用两次，我是否应该在myFunction() 中添加逻辑以在再次订阅之前取消订阅我的第一次订阅？
```
mySub: Subscription;

myFunction(){

    this.mySub = this.myService.getSomeData(this.data).subscribe({
        next: (val) => { 
            //stuff
        },
        error: (e) => { 
            //more stuff
        }
    });

}
```
我在想，如果有可能执行两次订阅，那么我应该在进行另一次订阅之前取消订阅。

【问题讨论】：

标签： angular rxjs

【解决方案1】：

这取决于this.myService.getSomeData Observable 的行为。它们并不完全相同。

例如，如果 Observable 是 Subject 或 BehaviorSubject，您最终将获得多个订阅，其中一些/全部未取消订阅。换句话说，内存泄漏。

如果它类似于 Angular HttpClient 的 get Observable，它将启动一个网络功能并最终自行完成。不需要unsubscribe。

如果您在组件销毁时确实有多个或未知数量的订阅可能未完成，您可能想尝试这样的事情：

s: Subscription [] = [];

ngOnDestroy() {
   s.forEach(sb => sb.unsubscribe());
}

然后，每次您订阅某事时，请执行 s.push(subscription) 并设置好。

【讨论】：

【解决方案2】：

我可能在这里错了，但我相信......

您将有 2 个订阅

只有mySub 的当前实例将被取消订阅

3....

相反，我会在组件中声明一个主题，并在单击按钮时声明next。在您的ngOnInit 中订阅该主题并将其mergeMap 到 getSomeData observable。像这样的东西：

export class myComponent implements OnInit, OnDestroy {
  private mySubj = new Subject<null>()
  private sub: Subscription | null = null
  ngOnInit() {
    this.sub = this.mySubj.pipe(
      mergeMap(() => this.myService.getSomeData
    ).subscribe(() => {
       // Do the thing 
    })
  }

  onButtonClick() {
    this.mySubj.next(null)
  }

  ngOnDestroy() {
    this.sub?.unsubscribe()
}

我在手机上，所以请原谅任何错别字。如果指出将编辑?

【讨论】：