CODEWITHSUNDEEP
javascriptangulartypescriptrxjsobservable
bigShaq
bigShaq

Reputation: 79

Angular - chaining Observables and combining their results

I want to run the following 2 requests in sequence and combine their results in the end.

  1. If the first request's response body containsisSuccessful = false, then the second one should not run.
  2. If the first request fails for whatever reason, the second should not run.
  3. If the second request fails, it should not impact the first. The combineAndPrintMsg() should work successfully with just the first request's response message.

I have tried nesting subscriptions as shown below but I have heard that it is not a good approach.

firstReq = this.http.get("https://myApi.com/posts?userId=1");
secondReq = this.http.get("https://myApi.com/albums?userId=1");

.....

this.firstReq.subscribe(res1 => {
  const secondReqResult = this.doSecondRequest(res1);
  this.combineAndPrintMsg(res1, secondReqResult)
})

.....

doSecondRequest(res1: any) {
  let secondReqResponse;
  if (res1.isSuccessful) {
    this.secondReq.subscribe(res2 => {
      secondReqResponse = res2;
    })
    return secondReqResponse;
  }
}

combineAndPrintMsg(res1, res2) {
  console.log(res1.message + res2.message || '');
}

Upvotes: 0

Views: 2096

Answers (1)

Daniel Gimenez
Daniel Gimenez

Reputation: 20494

The first thing everybody needs to know when starting out with rxjs is don't subscribe to an observable inside an observable. (I used to do this all the time too). There are operators which merge the outputs of observables that you should learn.

In this case I will use switchMap inside the pipe for the first observable to execute the second if the isSuccessful from the first result is true. I then combine the two results inside the pipe of the second request - unless there is an error. If so, catchError is used so that only the first result is returned.

firstReq = this.http.get("https://myApi.com/posts?userId=1");
secondReq = this.http.get("https://myApi.com/albums?userId=1");

this.firstReq.pipe(
  switchMap((res1) => res1.isSuccessful 
    ? this.secondReq.pipe(
      map((res2) => ({ res1, res2 })), 
      catchError(() => of({ res1, res2: undefined }))
    )
    : of({ res1, res2: undefined })
  ),
  tap(({ res1, res2 }) => this.combineAndPrintMsg(res1, res2))
);

combineAndPrintMsg(res1, res2) {
  console.log(`${res1.message}${res2?.message}`);
}

The choice of switchMap was arbitrary, you should learn the difference between that and concatMap and mergeMap.

Upvotes: 3

Related Questions