How to handle RxJs timeout complete - Angular HttpClient

Question

How to detect an error by timeout operator? I would like to show an alert or something like that just when the server doesn't response.

I have a similiar code in my interceptor:

this.http.post('http://localhost:3000/api/core', data)
        .pipe(
            timeout(30000),
            map((response: any) => { // Success...
              return response;
            }),
            catchError((error) => { // Error...
              // Timeout over also handled here
              // I want to return an error for timeout
              return throwError(error || 'Timeout Exception');
            }),
            finalize(() => {
              console.log('Request it is over');
            })
        );

["rxjs": "^6.0.0", "@angular/http": "^6.0.3",]

It will throw a TimeoutError which you can look for using instanceof. — cartant
– cartant, Commented Nov 10, 2018 at 2:14

Daniel Delgado · Accepted Answer · 2021-04-25 06:21:13Z

21

This works

import { throwError, TimeoutError } from 'rxjs';

catchError((error) => { // Error...
   // Handle 'timeout over' error
   if (error instanceof TimeoutError) {
      return throwError('Timeout Exception');
   }

   // Return other errors
   return throwError(error);
})

I implemented this at my intecerptor that has other functionalities, the code here

edited Apr 25, 2021 at 6:21

answered Nov 30, 2018 at 19:03

Daniel Delgado

5,4036 gold badges42 silver badges54 bronze badges

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

4 Comments

Rasshu Over a year ago

The page was not found. Could you upload it again?

Amirhosein Al Over a year ago

Hey. This works for me but I still get the error ERROR Error: Uncaught (in promise): TimeoutError: Timeout has occurred

Daniel Delgado Over a year ago

If you don't want to return a error (you shoud) innstead of "throwError" return "of". And you will can handle in your map, or tap operator

Amirhosein Al Over a year ago

I was returning err instead of caught. Now it's working. Thank you

Suresh Kumar Ariya · Accepted Answer · 2018-11-10 07:00:00Z

-4

You can use timeoutWith operator to achieve this.

return this.http.post('http://localhost:3000/api/core', data).pipe(
      timeoutWith(3000, observableThrowError(new Error('Http Timeout exceeds'))),
      map((response: any) => { // Success...
              return response;
      }),
      catchError((error: HttpErrorResponse) => this.handleError(error))
    );

answered Nov 10, 2018 at 7:00

Suresh Kumar Ariya

9,8041 gold badge22 silver badges28 bronze badges

1 Comment

AlejandroDG Over a year ago

observableThrowError?

Collectives™ on Stack Overflow

How to handle RxJs timeout complete - Angular HttpClient

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related