How to intercept a cancelled http request in Angular?

Question

Angular cancels http requests very fast and I want to intercept those cancelled requests. Is it possible to capture cancelled requests in the interceptor? Below is a fragment of my interceptor code, where I want to catch cancelled request.

  intercept(req: HttpRequest<any>, next: HttpHandler): 
Observable<HttpEvent<any>> {
    this.onStartRequest();
    // Pass the cloned request instead of the original request to the next handle
    return next.handle(req).do(
      (event: HttpEvent<any>) => {
        if (event instanceof HttpResponse) {
         // do something
        }
      },
      (err: any) => {
        if (err instanceof HttpErrorResponse) {
          // do something
        }
      }
    );
  }

Please explain what you mean by a 'cancelled request' in this context. — Keenan Diggs
– Keenan Diggs, Commented Jun 20, 2019 at 15:27
Possible duplicate of handle cancelled http request in angular httpclient interceptor — Narm
– Narm, Commented Jun 20, 2019 at 15:36

Gabriel METZGER · Accepted Answer · 2019-06-20 15:25:37Z

3

Did you try with the finalize event?

return next.handle(req).pipe(
  finalize(() => {
    // request completes, errors, or is cancelled
  })
);

answered Jun 20, 2019 at 15:25

Gabriel METZGER

1801 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Aijaz Over a year ago

How do I figure out which request, got canceled in finalize? Does it have any specific key in it which shows that the particular request got canceled?

Mehdi Benmoha · Accepted Answer · 2019-06-20 15:24:33Z

0

You have to use the catchError RxJs operator when you use the next Handler, here's the code:

intercept(req: HttpRequest<any>, next: HttpHandler): 
Observable<HttpEvent<any>> {
    this.onStartRequest();
    // Pass the cloned request instead of the original request to the next handle
    return next.handle(req).do(
      (event: HttpEvent<any>) => {
        if (event instanceof HttpResponse) {
         // do something
        }
      })
      .catchError((err: HttpErrorResponse) => {
        // Handle errors
      });
  }

PS: Don't forget to import the catchError operator.

answered Jun 20, 2019 at 15:24

Mehdi Benmoha

3,9853 gold badges25 silver badges54 bronze badges

Collectives™ on Stack Overflow

How to intercept a cancelled http request in Angular?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related