How to handle RxJs timeout complete - Angular HttpClient

Daniel Eduardo Delgado Diaz picture Daniel Eduardo Delgado Diaz · Nov 10, 2018 · Viewed 8.6k times · Source

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",]

Answer

Daniel Eduardo Delgado Diaz picture Daniel Eduardo Delgado Diaz · Nov 30, 2018

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: https://github.com/dedd1993/ngx-admin/blob/master/src/app/core/http/http.interceptor.ts