Ionic HTTP Request Timeout

Ionic Framework ionic-v3
1

Does anyone know how to implement a timeout on an HTTP Request in an Ionic 2 ?

I can’t find any examples yet of any Angular 2 Http timeouts.

2

There’s a chainable function for observables, heres one with 1 sec timeout:

this.http.get(url)

  .timeout(1000)
  .map....
5 Likes
3

Thanks. How do I run some code when the timeout occurs?

4

It still gets to the subscribe method, a timeout is an error so it should get to the error part:

this.http.get(url)

  .timeout(1000)
  .map(...)
  .subcribe((success) => {...}, (err) => { // Deal here with timeout error. });

Don’t take my word for granted, check the docs, i may be wrong if it goes in the success or the error function.

8 Likes
5

Oh I see. Thank you - I will that that out.

1 Like
6

@luchillo17 thank you very much - that worked.

1 Like
7

It took me almost a day to figure this out, as angular 2 uses ES6 it’s like learning a whole new language.

1 Like
8

In rxjs/Observable.d.ts (5.0.0-beta.6, the current ionic 2 default) the .timeout(1000) function is not defined. And when I try to force it I get the error: this.http.post(...).timeout is not a function error send
I do need to use this (no response at all currently creates a deadlock) but I have no idea how to fix this issue.

1 Like
9

In latest versions of Angular 2 the operators need to be imported where you get to need them in the observable, most popular ones are:

import {Http, Headers} from '@angular/http';
import 'rxjs/add/operator/retry';
import 'rxjs/add/operator/timeout';
import 'rxjs/add/operator/delay';
import 'rxjs/add/operator/map';
9 Likes
10

Thank you! I was having problems trying to transpile because timeout was not imported.

11

What is default timeout ?

12

What do you mean by default timeout? if you mean the rxjs timeout operator, it let’s you timeout an observable and return an error in the specified time.

Say i want to make an http request and make sure it doesn’t run forever, i put a 10s timeout so if it hasn’t finished in that time the observable emits an error.

13

It means no default value.

14

Default value is 1 minute.

15

Is it possible to set it to 3 minutes?

16

Yes.
Use like this:
this.http.get(url).timeout(180000).

17

I’ve tried this first, but it didn’t work.
The default timeout or the timeout of the web view fires first.
And I haven’t found any solution yet setting the timeout longer than the default.

18

@nsvivek121
It’s working now like you told.
Even though I didn’t import timeout, npm run serve didn’t throw an error.

19

The above solution works, but only for the angular http requests.
It does not work with the ionic native http plugin.
Does anyone know how to do the same with the ionic native http plugin.
I searched a lot but found no way to do the same in the ionic native HTTP plugin.

20

Sorry man, haven’t tested the native implementation, however it returns a promise, unless the promise itself resolves or rejects when timeout, it cannot be timed out.

Given the docs on native/http, from it’s api i get that it doesn’t support timeout operations.