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

时间:2019-01-30 06:45:15

标签: javascript angular typescript rxjs

我需要打两个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)                        
    );
  }
);

1 个答案:

答案 0 :(得分:4)

Concat映射在您有很多请求时使用,但是当它们相似时,这意味着它们将具有相同的输出数据和处理程序,这不是您的情况。因此,您可以使用 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调用可观察对象,因为它们是有限的(确切地说,仅发出一个事件)。