25

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?

0

4 Answers 4

42

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);
Sign up to request clarification or add additional context in comments.

6 Comments

I had to do: .retryWhen(errors => errors.delayWhen(() => Observable.timer(1000))) with rxjs 5.0.2. learnrxjs.io/operators/error_handling/retrywhen.html
Is there a way to set the timeout globally?
@Will Is there a way to set the timeout globally?
@JoeSleiman you can set timeout globally by extending the Http class. See this article for more details: restlet.com/company/blog/2016/04/18/…
@ThierryTemplier, can you take a look on this link : i describe my issue: stackoverflow.com/questions/44650013/…
|
12

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

9 Comments

Excellent answer - just a note: you also need to import the timeout operator from rxjs or this wont work: import 'rxjs/add/operator/timeout';
Hi Gunter, I have used timeout with no effect (meaning no delay), but when I use delay(1000) it works with the data being delayed for 1 sec. I have imported ` 'rxjs/add/operator/timeout'` but even when I put timeout(5000) I get the data immediately. Does timeout do something different than to just delay the data?
Timeout completes the observable with an error when the data doesn't arrive within time. Delay delays the output of events.
How does unsubscribing from the observable cancel the http request? I don't think it does
this should be getPeople.subscribe(data => this.people = data), notice the fat arrow: =>
|
5

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

Comments

0

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.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.