Capture cancelled/abort request on HttpInterceptor. Angular8

user_1868658 0
Viewed 551

I'm having a problem in an application built with Angular 8.

I have an application-level spinner that turns on for every http request made and turns off in responses.

These requests are captured by an HttpInterceptor that shows a load spinner and when the response is obtained it is hidden. The problem comes when some of these http calls are cancelled, as in this example:

  search(param: string) {
    return terms.debounceTime(SEARCH_DEBOUNCE)
      .distinctUntilChanged()
      .switchMap(term => this.search(param));
  }

The above code belongs to a text search engine where when you stop typing for a period of time the search is performed. When this is done too quickly, several requests can be made simultaneously, which switchMap then cancels. For this reason, when the requests are cancelled, the interceptor is not able to get the status of that cancellation and therefore the spinner never disappears.

The interceptor does something like this:

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<any> {
    // the spinner is shown

    return next.handle(request).pipe(
      catchError(error => {
        // error handling and spinner stop
      }),
      finalize(() => {
        // Access to all responses except cancelled requests, which have no response.
      })
    );

Therefore for those cases where the request is cancelled or aborted, I cannot stop the spinner.

angular http
1 Answers

If your goal is to stop the spinner without any specific condition, but just in the return statement, you can use the tap operator (https://rxjs-dev.firebaseapp.com/api/operators/tap) like this:

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<any> {
// the spinner is shown

return next.handle(request).pipe(
  catchError(error => {

    // Do things
  }),
  finalize(() => {
   // Do things
  }),
  tap(()=> /* stop spinning */)
);
user_105442730
Related