How can I implement timeout for angular2+ http request

Here is just regular request looking like that:

this.people = http.get('http://localhost:3000/users')
                  .map(response => response.json());

Is there any way to delay/timeout that?

4
Leave a Reply

avatar
4 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Jason Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Jason
Guest

You can leverage the timeout operator of observables, as described below:

return this.http.get('http://api.geonames.org/postalCodeSearchJSON',
          { search: params })
    .retryWhen(error => error.delay(500))
    .timeout(2000, new Error('delay exceeded')) // <------
    .map(res => res.json().postalCodes);

See this article for more details (with the section “Retry support”):

Jason
Guest

The return value of http.get() is an observable, not the response.
You can use it like:

getPeople() {
  return http.get('http://localhost:3000/users')
      .timeout(2000)
      .map(response => response.json());
  }
}

foo() {
  this.subscription = getPeople.subscribe(data => this.people = data)
}

// to cancel manually
cancel() {
  this.subscription.unsubscribe();
}

See also https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/timeout.md

Jason
Guest

If you are using RxJS version 6 and above the current syntax is this:

import { timeout } from ‘rxjs/operators’;

getPeople(){
  return this.http.get(API_URL)
  .pipe(
      timeout(5000) //5 seconds
  );

Jason
Guest

As with the new version, you must pipe to use the timeout. And to get the response you can use map inside. The complete code is as below. import { map, timeout, catchError } from 'rxjs/operators'; const sub: any = this.httpClient.post(this.baseUrl, body) .pipe(timeout(Config.SesamTimeout), catchError((err: any) => { this.handleTimeout(err); return of(null); }), map((v: SesamResponse) => { if (v) { const a: SearchResultGroup[] = this.convertSesamResponseToApiFileItem(v); return a; } })); Here Config.SesamTimeout is the time in milliseconds.