How to avoid nested subscriptions in Angular / RxJS - One call after another call (sequentially / not parallel) And looping http api calls

Question

I have a situation to make a nested rest api call from angular. I have to make one call after another call based on the result of previous call as given below

  OuterLoop: while (1) {
    getHttpResponse1().subscribe((value1) => {
      if (value1 == 'A') {
        InnerLoop: while (1) {
          getHttpResponse2().subscribe((value2) => {
            if (value2 == 'B') {
              break OuterLoop;
            } else {
              continue InnerLoop
            }
          })
        }
      }else {
        continue OuterLoop;
      }
    })
  }

I need make http call in first loop infinite time util i get expected result , once i received the expected result then I need to make another http call (second loop) infinite time util i get expected result after that i have to break all loops.

I have tried below code which ok for one http call but I want to make another one based on the result of first one, I end up in nested subscription again.

    const sub1 = interval(1000).subscribe(() => {       // http call every second 
      this.apiservice.getHttpResponse1()
        .pipe(takeWhile(val => val))                    // receive true / false
        .subscribe(val => {                             // if true or ignored
          console.log("loopOne" + val)
          sub1.unsubscribe()

          const sub2 = interval(1000).subscribe(() => { // http call every second 
            this.apiservice.getHttpResponse2()
              .pipe(takeWhile(val2 => val2))            // receive true / false
              .subscribe(val2 => {                      // if true or ignored
                console.log("loopTwo" + val2)
                sub2.unsubscribe()
              })
          })
        })
    })
  }

Is this the only approach ? I felt it's kind of mess. I am new to switchMap, mergeMap and so on and I felt it's not appropriate for my problem.

I want to avoid nested subscription / http calls ?

Do you have any better solution ?

Answer 1

Actually, you're on the right track. To flatten the nested subscriptions you need to use mergeMap , switchMap , or concatMap operator.

These operators allow you to manage your subscriptions flow.

A short explanation of the difference between these operators:

mergeMap – this operator is best used when you wish to flatten an inner observable but want to manually control the number of inner subscriptions.

switchMap – when the operator gets a value, it switches to another observable and cancels the previous one.

concatMap – on each emission the previous inner observable (the result of the function you supplied) is canceled and the new observable is subscribed.

Your current implementation will look like that:

interval(1000)
  .pipe(
    // when we get value from the interval => make a request
    mergeMap(() => this.apiservice.getHttpResponse1()),
    takeWhile(val1 => val1),
    // when we get the desired value, switch to the next interval
    switchMap(() => interval(1000)),
    // when we get value from the interval => make a request
    mergeMap(() => this.apiservice.getHttpResponse2()),
    takeWhile(val2 => val2),
  ).subscribe();

PS In this example, switchMap can be replaced with any other mapping operator, since the previous subscription is cancelled via takeWhile .

PPS The thing you do here is called long polling . You can find many interesting approaches on google on how to better organise these looped requests.