如何在 Angular 和 RxJs 中管理多个顺序订阅方法？

Posted 2023-03-13

【中文标题】如何在 Angular 和 RxJs 中管理多个顺序订阅方法？

【英文标题】：How to manage multiple sequential subscribe methods in Angular and RxJs?

【发布时间】：2019-06-23 09:18:10

【问题描述】：

我需要调用两个 http 服务调用并在订阅另一个 http 服务调用后订阅它们。我的意思是，操作将是连续的，因为最后两个调用取决于第一个调用。这个操作可以用 RxJs 的 concatMap 处理吗？

我使用嵌套订阅解决了这个问题。但是，我认为使用 concatMap 可以做到这一点。在我搜索的所有示例中，有两个连接的调用。如何连接两个以上的订阅并解决问题。

this.accountService.fetchBranchCodeLength().subscribe(
        data => 
            this.branchCodeLength = +data;


    //Now, I need to call another service to calculate 
    accountNumberLengthWithProductCode//


   this.subscribers.fetchAcoountNumberLength = 
    this.accountService.fetchAccountLengthConfiguration().subscribe(
      accountLength => 
        this.accountNumberLengthWithProductCode = 
            (+accountLength) - (+this.branchCodeLength););


    //Another same kind of call to calculate 
    SUBGLCodeLength//


   this.subscribers.fetchSUBGLCodeLengthSub = 
     this.glAccountService.fetchSUBGlCodeLength(SUBGlCodeQueryParam)
      .subscribe(length => this.SUBGLCodeLength = 
          (+length.value) - (+this.branchCodeLength)                        
    );
  
);

【问题讨论】：

是的，你可以使用concatMap；见***.com/questions/40651060/…

How to use RxJS observables in sequential order?的可能重复

Angular 2 combine three http calls with flatMap? RxJs?的可能重复

根据您的链接，我已经更改了这样的代码，但是现在如何调用另一个服务？ this.subscribers.fetchBranchCodeLengthSub = this.accountService.fetchBranchCodeLength().pipe( concatMap(data => this.accountService.fetchAccountLengthConfiguration().pipe( map(accountLength => this.accountNumberLengthWithProductCode = (+accountLength) - (+data) ; ) ) ) ).subscribe();

【参考方案1】：

当你有很多请求时使用concat map，但是当它们相似时，这意味着它们将具有相同的输出数据和处理程序，这不是你的情况。所以你可以使用 forkJoin，因为你的调用之间没有任何依赖关系。

代码

forkJoin(
   this.accountService.fetchBranchCodeLength(),
   this.accountService.fetchAccountLengthConfiguration(),
   this.glAccountService.fetchSUBGlCodeLength(SUBGlCodeQueryParam)
).subscribe(([data, accountLength, length]) => 
   this.branchCodeLength = +data;
   this.accountNumberLengthWithProductCode = (+accountLength) - this.branchCodeLength
   this.SUBGLCodeLength = (+length.value) - this.branchCodeLength;
);

---

顺便说一句，您不需要取消订阅 http 调用 observables，因为它们是有限的（准确地说，只发出一个事件）。

【讨论】：

forkJoin 将轻松完成任务。很好的解决方案 :) 我可以通过 concatMap 知道如何做到这一点吗？就像你说的当有很多请求时，如何处理它们？而且我认为，如果您在我们销毁和重新创建组件时不取消订阅，但我们不清理现有订阅，则此订阅仍然存在并导致内存泄漏。从这个链接得到：blog.angularindepth.com/…

很高兴它对您有所帮助。关于退订看看那篇文章netbasal.com/when-to-unsubscribe-in-angular-d61c6b21bad3，关于 concatMap 你可以把它想象成一个 for 循环，所以你需要对 N 个相同的 observables 执行相同的操作，但是你一个接一个地运行它们blog.angularindepth.com/…。

但有时需要。查看链接文章的评论-medium.com/@viktorlove/…

哦，是的，这是真的，当“您的组件在您从服务器获得响应之前就被破坏”这样的情况是可能的，那么取消订阅可能会很有用。

从您的 ConcatMap 文章中，有一个使用 forkJoin 的警告 - 请参阅 forkJoin() 警告部分。