CODEWITHSUNDEEP
httpangular
Sergino
Sergino

Reputation: 10818

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?

Upvotes: 25

Views: 47306

Answers (4)

Thierry Templier
Thierry Templier

Reputation: 202176

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);

Upvotes: 42

Sibeesh Venu
Sibeesh Venu

Reputation: 21719

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.

Upvotes: 0

Virendra Singh
Virendra Singh

Reputation: 297

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
  );

Upvotes: 5

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657288

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

Upvotes: 12

Related Questions