Angular how to handle sequential requests and how handle loading var?

Question

I save the profile and once the request would be sucess I make another request to create a payment. Right now the code lookes like this

 this.profileService.saveProfile(dataProfile).pipe(
      catchError(e => of(null))
    ).subscribe(res => {
      if (res) { // if user saved profile data
       const data = {
   params: {
            user: {
              surname: this.formInfo.get('surname').value,
              name: this.formInfo.get('name').value,
              father_name: this.formInfo.get('father_name').value,
              iin: this.formInfo.get('iin').value,
            },
            tariff: obj ? {
              months: obj.Months,
              amount: obj.Amount,
              amountByMonth: obj.AmountByMonth
            } : null,
}
        this.buyService.create(data).pipe( ... 
  }

What is the best way to make this code be better ? I have read about concatMap operator in RXjs but this is related to array of Observables , here I have only one response if user saved own data or not. Also how should I handle loading variable here for each request spearately?

Picci · Accepted Answer · 2021-03-15 09:00:50Z

3

concatMap is the operator to use most of the times to concatenate 2 or more http operations.

So, in this case, your code could look like this

this.profileService.saveProfile(dataProfile).pipe(
  concatMap(resp => {
     const data = {
        params: {
          // your params
        }
     }
     // the function passed to concatMap MUST return an Observable
     return this.buyService.create(data)
  })
).subscribe(
   next: result => {// manage the result},
   error: err => {// manage the error}
)

Honestly I do not understand when you write "concatMap operator in RXjs but this is related to array of Observables".

You may get some inspiration around typical http related use cases from this article.

answered Mar 15, 2021 at 9:00

Picci

17.8k16 gold badges80 silver badges125 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sunstrike527 Over a year ago

well I mean that I use only the boolean response fromsaveProfile , if user saved own data then I make another request. I was thinking that when I use concatMap I pass the data of first http req to the next http request.

Picci Over a year ago

You can ignore the data passed in by the first service call, something like this concatMap(() => {// do stuff; return this.buyService.create(data)}). In this case you enter concatMap only if the previous request succeeds, otherwise you go into the error function specified as input to subscribe.

Collectives™ on Stack Overflow

Angular how to handle sequential requests and how handle loading var?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related