Angular Set HTTP Timeout

Question

I was looking for a way to stop/terminate an http request if it exceeds a certain time. So in Angular 5, is there anyway to set a timeout for an http request?

If there is a way, how can we do something, like execute some function, after a timeout?

The method listed in this question

How can I implement timeout for angular2+ http request gives an error:

error TS2339: Property 'timeout' does not exist on type 'Observable'.

@bugs read the description for the error with the possible duplicate — S K, Apr 12 '18 at 08:11

Tomasz Kula · Answer 1 · 2018-04-12T08:25:59.947

55

Just as the comment mentioned, you need to use the timeout operator. However, the linked answer is a little bit outdated. Since rxjs 5.5.2 you need to use the pipe method with lettable operators. And assumming you are using the HttpClient to make your requests, there is no need for map(response => response.json()).

Like this:

import { timeout, catchError } from 'rxjs/operators';
import { of } from 'rxjs/observable/of';

http.get('https://example.com')
   .pipe(
      timeout(2000),
      catchError(e => {
        // do something on a timeout
        return of(null);
      })
    )

edited Apr 12 '18 at 08:25

answered Apr 12 '18 at 08:12

Tomasz Kula

16,199
2
68
79

2

so where do i get the response ? – S K Apr 12 '18 at 08:22
2

`http.get('https://example.com').pipe(...).subscribe(response => console.log(response))` – Tomasz Kula Apr 12 '18 at 08:23
1

i get an error as: `Argument of type '(e: any) => void' is not assignable to parameter of type '(err: any, caught: Observable – S K Apr 12 '18 at 08:25
2

You need to return an observable from `catchError`. Check out my edit. Also please upvote and/or accept my answer :) – Tomasz Kula Apr 12 '18 at 08:26
is returning null ok ? – S K Apr 12 '18 at 08:28
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/168803/discussion-between-tomasz-kula-and-s-k). – Tomasz Kula Apr 12 '18 at 08:31
what is the purpose of `return of(null)`? – KnowledgeSeeker Sep 03 '18 at 05:31
I'm using `.pipe(timeout(300000), (e) => {` but it always wait only for 1 minute max. – Pablo Nov 07 '18 at 13:22
This worked for me :) – Asfo Dec 01 '18 at 02:51
So how to distinguish between timeout errors and http errors such as 500 error? – Simon_Weaver Jan 16 '19 at 08:25
It’s better to use timeout with an error for second parameter. Unless you’re just throwing away all errors or never need to distinguish between them. https://stackoverflow.com/a/36719185/16940 – Simon_Weaver Jan 16 '19 at 08:28

Angular Set HTTP Timeout

1 Answers1

Linked