How to do a service call in interceptor & execute the next steps only once that is completed- async call to a service in Angular Interceptor

Question

I am trying to do a service call in the interceptor with below code piece-enter image description here However i am getting below error after running it-enter image description here

SO when i put a .then() & wait for the service to get over & then only execute the other piece of code inside this .then() its giving this error as pipe is undefined. However if i simply put a this.authservice.refreshToken(); without any wait it will execute the next set of lines without waiting for this service call to complete & work fine without giving any error. Any idea how to work on an interceptor where we can call a service call method asynchronously?

Answer 1

you have to return observable from the intercept method. in your code return next.handle(... is done inside of .then( callback instead and that is why it doesn't work

try this way of organizing interceptor logic instead

const token$ = this.IsTokenExpired() ? 
   from(this.authService.refreshPingToken()) : 
   of(this.AuthToken);

return token$.pipe(
  switchMap((token) => {
    // ...your logic for creating "req"
    return next.handle(req);
  }),
  tap(handleResponse)
)