Rxjs Refresh token and call same API using ionic native http plugin

Question

I am learning Rxjs and working on ionic 4 app which uses ionic-native http plugin for api calling(It returns promise).I am using below code for making API call/refresh token logic.

Utility file code:(Using from operator to convert promise into observable)

from(this.http.get(url, param, headerMap));

Service file code

return this.utilService.httpCall2('GET', taskURL, null, null).pipe(catchError(err=>{
        if(err.status==401){
          // return  this.utilService.refreshTokenAndRetryCall2().toPromise().then(()=>{
          //   return this.utilService.httpCall2('GET', taskURL, null, null);
          // });
          return this.utilService.refreshTokenAndRetryCall2()
        }
        else{
          throw err;
        }
      }
    ),
      tap(resp => console.log("API response is", JSON.stringify(resp))), map(resp => JSON.parse(resp.data)),
      tap(resp => console.log("parsed data is ", JSON.stringify(resp))));

I want to achieve below scenario

Call API using utility http method this.utilService.httpCall2('GET', taskURL, null, null).
If the token is expired then API returns 401 and call refresh token method.
After refresh token call original api again to get the desired data

So the issue I am facing is after refreshTokenAndRetryCall2() call I am not able to do the original api call with refresh token(i.e, this.utilService.httpCall2('GET', taskURL, null, null)

Jan-Niklas Wortmann Jan-Niklas Wortmann · Accepted Answer · 2020-04-14T21:11:43

So the catchError operator actually has two parameters error & source. Source represents the source observable, so what you could do is

return this.utilService.httpCall2('GET', taskURL, null, null).pipe(catchError((err, source) =>{
        if(err.status==401){
          return  this.utilService.refreshTokenAndRetryCall2().pipe(
            switchMapTo(source)
          )
        }
       ...

Just remember to build in some kind of circuit breaker otherwise you might end up in an endless loop

Rxjs Refresh token and call same API using ionic native http plugin

1 Answers