I want to run the following 2 requests in sequence and combine their results in the end.
isSuccessful = false, then the second one should not run.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 || '');
}
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.