# How to make a Http request with timeout? **URL:** \ **Category:** ionic-v3\ **Created:** [September 14, 2017, 7:51am UTC](https://forum.ionicframework.com/t/how-to-make-a-http-request-with-timeout/105348 "2017-09-14T07:51:07Z")\ **Posts on this page:** 14\ **Page:** 1
**Author:** ![FnnHuman](https://avatars.discourse-cdn.com/v4/letter/f/5f8ce5/32.png) [@FnnHuman](https://forum.ionicframework.com/u/FnnHuman)\ **Post date:** [September 14, 2017, 7:51am UTC](https://forum.ionicframework.com/t/how-to-make-a-http-request-with-timeout/105348/1 "2017-09-14T07:51:07Z")
For example in this situation? ```auto return new Promise((resolve, reject) => { let headers = new Headers(); headers.append('Content-Type', 'application/json'); this.http.post(this.url + '/api/', JSON.stringify(credentials), { headers: headers }) .subscribe(res => { let data = res.json(); resolve(data); }, (err) => { reject(err); }); }); ``` ---
**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\ **Post date:** [September 14, 2017, 7:55am UTC](https://forum.ionicframework.com/t/how-to-make-a-http-request-with-timeout/105348/2 "2017-09-14T07:55:43Z")
This is antipattern soup: - You never need to be instantiating `Promise`s - You don’t need to stringify POST bodies - You don’t need to futz with content type headers That being said, look into the RxJS `timeout` operator. ---
**Author:** ![FnnHuman](https://avatars.discourse-cdn.com/v4/letter/f/5f8ce5/32.png) [@FnnHuman](https://forum.ionicframework.com/u/FnnHuman)\ **Post date:** [September 14, 2017, 8:12am UTC](https://forum.ionicframework.com/t/how-to-make-a-http-request-with-timeout/105348/3 "2017-09-14T08:12:50Z")
so how should it look in your opinion? ---
**Author:** ![Tommertom](https://avatars.discourse-cdn.com/v4/letter/t/ed8c4c/32.png) [@Tommertom](https://forum.ionicframework.com/u/Tommertom)\ **Post date:** [September 14, 2017, 9:44am UTC](https://forum.ionicframework.com/t/how-to-make-a-http-request-with-timeout/105348/4 "2017-09-14T09:44:15Z")
Hi Add .timeout(1000) as operator before subscribe and after get > Next, use .catch to catch errors/timeout to proper follow-up Regards Tom ---
**Author:** ![Tommertom](https://avatars.discourse-cdn.com/v4/letter/t/ed8c4c/32.png) [@Tommertom](https://forum.ionicframework.com/u/Tommertom)\ **Post date:** [September 14, 2017, 10:05am UTC](https://forum.ionicframework.com/t/how-to-make-a-http-request-with-timeout/105348/5 "2017-09-14T10:05:50Z")
Shouldn’t the code be like ```auto return Observable.from(new Promise((resolve, reject) => { let headers = new Headers(); headers.append('Content-Type', 'application/json'); this.http.post(this.url + '/api/', JSON.stringify(credentials), { headers: headers }) .subscribe(res => { let data = res.json(); resolve(data); }, (err) => { reject(err); }); })) ``` Sorry. just teasing. Couldn’t help it. Tom ---
**Author:** ![ShehramTahir](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/shehramtahir/32/110823_2.png) [@ShehramTahir](https://forum.ionicframework.com/u/ShehramTahir)\ **Post date:** [September 14, 2017, 11:32am UTC](https://forum.ionicframework.com/t/how-to-make-a-http-request-with-timeout/105348/6 "2017-09-14T11:32:22Z")
import this also import ‘rxjs/add/operator/timeout’; ```auto return Observable.from(new Promise((resolve, reject) => { let headers = new Headers(); headers.append('Content-Type', 'application/json'); this.http.post(this.url + '/api/', JSON.stringify(credentials), { headers: headers }).timeout(15000) .subscribe(res => { let data = res.json(); resolve(data); }, (err) => { reject(err); }); })) ``` try this ---
**Author:** ![Tommertom](https://avatars.discourse-cdn.com/v4/letter/t/ed8c4c/32.png) [@Tommertom](https://forum.ionicframework.com/u/Tommertom)\ **Post date:** [September 14, 2017, 11:44am UTC](https://forum.ionicframework.com/t/how-to-make-a-http-request-with-timeout/105348/7 "2017-09-14T11:44:29Z")
Hi thx. I was actually trying to be funny, which evidently didn’t work out. It doesn’t make sense to put an observable (http.post) in a Promise. Even worse:convert that one back to Observable. The code should be more like ```auto return this.http.post( ....) .timeout(15000) .catch((err:Response) => { let details = err.json(); return Observable.throw(new Error(details)); }) .map(res=>res.json()) .subscribe( (data)=>{ .. do something }, (done)=>{.. do something }, (error)=>{.. do something }) ``` And I didn’t need to import the operator. This worked fine for me: ```auto import { Observable } from "rxjs/Rx"; ``` Regards Tom ---
**Author:** ![ShehramTahir](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/shehramtahir/32/110823_2.png) [@ShehramTahir](https://forum.ionicframework.com/u/ShehramTahir)\ **Post date:** [September 14, 2017, 11:53am UTC](https://forum.ionicframework.com/t/how-to-make-a-http-request-with-timeout/105348/8 "2017-09-14T11:53:15Z")
You should use Observables instead of promises. Observables is the good approach 1 - [https://angular-2-training-book.rangle.io/handout/observables/observables\_vs\_promises.html](https://angular-2-training-book.rangle.io/handout/observables/observables_vs_promises.html) 2 - [https://stackoverflow.com/questions/37364973/angular-promise-vs-observable](https://stackoverflow.com/questions/37364973/angular-promise-vs-observable) ---
**Author:** ![FnnHuman](https://avatars.discourse-cdn.com/v4/letter/f/5f8ce5/32.png) [@FnnHuman](https://forum.ionicframework.com/u/FnnHuman)\ **Post date:** [September 14, 2017, 12:09pm UTC](https://forum.ionicframework.com/t/how-to-make-a-http-request-with-timeout/105348/9 "2017-09-14T12:09:31Z")
and how should I call this function? ---
**Author:** ![ShehramTahir](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/shehramtahir/32/110823_2.png) [@ShehramTahir](https://forum.ionicframework.com/u/ShehramTahir)\ **Post date:** [September 14, 2017, 12:12pm UTC](https://forum.ionicframework.com/t/how-to-make-a-http-request-with-timeout/105348/10 "2017-09-14T12:12:45Z")
It is simple to call a function. Import the service in the class where you want call the function. Make a object of that service in your constructor. then you will only call it by this.servicename.functionname(arguments to be passed); ---
**Author:** ![AGON123](https://avatars.discourse-cdn.com/v4/letter/a/ce7236/32.png) [@AGON123](https://forum.ionicframework.com/u/AGON123)\ **Post date:** [September 14, 2017, 12:48pm UTC](https://forum.ionicframework.com/t/how-to-make-a-http-request-with-timeout/105348/12 "2017-09-14T12:48:57Z")
hi funnhuman greeting for the day ! i think this would help you ```auto 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(); } ``` [url](https://earningkart.in) ---
**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\ **Post date:** [September 14, 2017, 6:24pm UTC](https://forum.ionicframework.com/t/how-to-make-a-http-request-with-timeout/105348/13 "2017-09-14T18:24:51Z")
> [@Tommertom](#): > > I didn’t need to import the operator. Check out the size of your app binary doing it that way versus importing the operator and `Observable` from `Observable`. When you import `Observable` from the monolithic `Rx` or `rxjs`, you end up with the entire kitchen sink. Last I checked, it was about 600KB. ---
**Author:** ![Chipsmore](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/chipsmore/32/116545_2.png) [@Chipsmore](https://forum.ionicframework.com/u/Chipsmore)\ **Post date:** [January 17, 2018, 3:37am UTC](https://forum.ionicframework.com/t/how-to-make-a-http-request-with-timeout/105348/14 "2018-01-17T03:37:53Z")
Hi may i know where should this code applied in the app . issit app.component.ts file ? ---
**Author:** ![OlamideA](https://avatars.discourse-cdn.com/v4/letter/o/90ced4/32.png) [@OlamideA](https://forum.ionicframework.com/u/OlamideA)\ **Post date:** [June 21, 2019, 9:09am UTC](https://forum.ionicframework.com/t/how-to-make-a-http-request-with-timeout/105348/15 "2019-06-21T09:09:43Z")
I needed to this, this is what I did to achieve it: ```auto return new Promise((resolve, reject) => { this.http.get(url) .pipe(timeout(10000)) .toPromise() .then((getRequestResponse: APIResponseModel) => { if (!environment.production) { console.log(getRequestResponse); } resolve(getRequestResponse); }) .catch((error) => { if (!environment.production) { console.log(error); } reject(error); }); }); ```