javascript - How to manage multiple sequential subscribe methods in Angular and RxJs? - Stack Overflow

admin管理员组

文章数量:1398831

I need to call two http service calls and subscribe them after subscribing another one http service call. I mean, the operation will be sequential as the last two calls depend on the first one. Can this operation be handled with concatMap of RxJs?

I solved the problem using nested subscription. But, I think using concatMap, this can be done. In all examples I searched, there are two calls which are concatenated. How to concat more than two subscription and solve the issue.

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)                        
    );
  }
);

I need to call two http service calls and subscribe them after subscribing another one http service call. I mean, the operation will be sequential as the last two calls depend on the first one. Can this operation be handled with concatMap of RxJs?

I solved the problem using nested subscription. But, I think using concatMap, this can be done. In all examples I searched, there are two calls which are concatenated. How to concat more than two subscription and solve the issue.

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)                        
    );
  }
);

• javascript
• angular
• typescript
• rxjs

Share Improve this question Follow edited Jan 30, 2019 at 6:54 Shofol asked Jan 30, 2019 at 6:45 ShofolShofol 73311 gold badge1111 silver badges2626 bronze badges 4

• 1 Yes, you can use concatMap; see stackoverflow./questions/40651060/… – xkeshav Commented Jan 30, 2019 at 6:53
• Possible duplicate of How to use RxJS observables in sequential order? – Harun Yilmaz Commented Jan 30, 2019 at 6:58
• Possible duplicate of Angular 2 bine three http calls with flatMap? RxJs? – Bunyamin Coskuner Commented Jan 30, 2019 at 7:05
• According to your links, I've changed the code like this but how to call another service now? this.subscribers.fetchBranchCodeLengthSub = this.accountService.fetchBranchCodeLength().pipe( concatMap(data => this.accountService.fetchAccountLengthConfiguration().pipe( map(accountLength => { this.accountNumberLengthWithProductCode = (+accountLength) - (+data); }) ) ) ).subscribe(); – Shofol Commented Jan 30, 2019 at 8:03

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

Concat map is used when you have a lot of requests, but when they are similar, it means they will have the same output data and handler, which is not your case. So you can use forkJoin, because there are no any dependencies among your calls.

Code

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;
});

---

And by the way, you do not need to unsubscribe from http call observables, because they are finite (to be precise the emit only one event).

本文标签： javascriptHow to manage multiple sequential subscribe methods in Angular and RxJsStack Overflow