How to set a timeout in Angular 2 when using HTTP + toPromise()?

Question

I found this answer where the solution proposed is to use Observables to set http requests' timeout.

However my code is structured to use mostly promises (I use observables where I want to have data automatically updated - that's not the case of the API calls).

Here is my code (inspired by Angular 2 tutorial):

makePostRequest(requestUrl:string, requestBody: any, requestOptions?: RequestOptions): Promise<any> {
    requestOptions = requestOptions || new RequestOptions({ headers: this._defaultHeaders });
    return this._http.post(requestUrl, JSON.stringify(requestBody), requestOptions)
        .toPromise()
        .then(this.extractData)
        .catch(this.handleError)
}

How to set a timeout and throw an error (if the timeout expires) that I then catch in .catch() or - alternatively - replicate the exact precise behavior with Observables (including converting the result to a Promise and not monitoring for monitoring for API update(*))?

(*) NOTE: I'm not sure whether Observables keep calling the APIs to check for new data, but that's not the point of my question, I just want to make sure this behavior does not occur.

Community · Accepted Answer · 2017-05-23 12:09:47Z

3

I would expect this to do what you want (not tried):

makePostRequest(requestUrl:string, requestBody: any, requestOptions?: RequestOptions): Promise<any> {
    requestOptions = requestOptions || new RequestOptions({ headers: this._defaultHeaders });
    return this._http.post(requestUrl, JSON.stringify(requestBody), requestOptions)
        .timeout(3000, new Error('timeout exceeded'))
        .toPromise()
        .then(this.extractData)
        .catch(this.handleError)
}

From Angular2 timeout in http post request

edited May 23, 2017 at 12:09

CommunityBot

11 silver badge

answered Jun 16, 2016 at 16:17

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

dragonmnl Over a year ago

already tried that. apparently timeout is supported only by observables

Günter Zöchbauer Over a year ago

And that doesn't work? Here is explained how to timeout a Promise stackoverflow.com/questions/32461271/… I don't know how to use it in your case because you aren't creating the Promise. You would need to do something like return new Promise((resolve, reject) => { http.post().subscribe(... resolve(), error => reject())})

dragonmnl Over a year ago

I don't remember the exact error in this specific case but I remember the cause : timeout is valid only in a observable chain, without promises.

dragonmnl Over a year ago

I'll make some other try next days. for now I'll up vote for the effort :)

dragonmnl Over a year ago

I found a solution (I answer to my own question). your answer was almost correct. But the right requence is first map, then toPromise and finally catch, taking care of importing the necessary rxjs operators.

dragonmnl · Accepted Answer · 2016-06-17 12:31:25Z

2

The solution (right chain + imports) I found:

// ! must import these
...
import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';

return this._http.get(requestUrl, requestOptions)
        .timeout(5000, new Error( 'HTTP (GET) timeout for path: ' + requestUrl))
        .map(this.extractData)
        .toPromise()
        .catch(this.handleError);

answered Jun 17, 2016 at 12:31

dragonmnl

15.6k36 gold badges93 silver badges139 bronze badges

Comments

Jordan Gray · Accepted Answer · 2018-05-08 17:03:44Z

I approached this a bit differently. I had logic that relied on a promise being returned—and doing .timeout caused it to immediately fail regardless of the timeout duration.

My solution was to create a new promise instead of using toPromise:

const timeoutInMs = 3000;

const request = this._http
    .post(/* ... */)
    .timeout(timeoutInMs);

return new Promise((resolve, reject) => {
    request
        .take(1)
        .subscribe(
            data => resolve(data),
            error => reject(error),
        );
});

If you use this a lot, you could refactor it into a function (not yet tested):

const toPromiseWithTimeout = <T>(obs: Observable<T>, ms): Promise<T> =>
    new Promise<T>((resolve, reject) => {
        obs
            .timeout(ms)
            .take(1)
            .subscribe(
                data => resolve(data),
                error => reject(error),
            );
    });

And to use it:

const timeoutInMs = 3000;

const request = this._http
    .post<ResponseType>(/* ... */);

return toPromiseWithTimeout(request, timeoutInMs);

Collectives™ on Stack Overflow

How to set a timeout in Angular 2 when using HTTP + toPromise()?

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related