Simple http request not working

Ionic Framework ionic-v3
1

I am a JAVA and PHP developer and I starting with Ionic 2. I am trying to make a simple http request with this code:

// home.ts

import { Component } from '@angular/core';
import { Http } from '@angular/http';
import { NavController } from 'ionic-angular';

@Component({
   selector: 'page-home',
   templateUrl: 'home.html'
})
export class HomePage {

   constructor(public navCtrl: NavController) {
 		http = http;
		this.http.get('location/of/data').map(res => res.json()).subscribe(data => {
			console.log(data);
		});
	}
}

But this error appear:
Cannot find name ā€˜httpā€™.

Can anybody help me?
Thank you and happy new year!

2 
constructor(public navCtrl: NavController, public http: Http) { 
  http.get('location/of/data').map(res => res.json()).subscribe(data => {});
}

or

someFunction(): void {
  this.http.get('location/of/data').map(res => res.json()).subscribe(data => {});
}
3

constructor(public navCtrl: NavController,private http:Http) {
you need to set it in constructor to be injected in the class

4

and please do not call asynchronous stuff like requests in the constructor functionā€¦ and please do not send requests in components --> use a service for those things :wink:

5

I respect your opinion. Why do you say this? If a component needs to kick off asynchronous tasks in order to prepare itself to display properly, why isnā€™t the constructor a good place to do that?

6

yeah, out of the good ā€œoldā€ oop programming a constructor is called to create an instance

let myInstance = new MyClass();

so in the following code --> you want to be sure (synchronous) that the instanciation of something works and is valid.

like

let myInstance = new MyClass(); 

myInstance.doSomething();

Now in some mysterious ways the instanciation could fail --> how to check this? --> right try - catch

let myInstance;

try {
  myInstance = new MyClass();
} catch(e) {
  // stop here
}

myInstance.doSomething();

Now you are doing some asyncronous stuff in the constructor function of myClass and in this asynchronous part an error happens or your whole instanciation is based on the result of something asynchronous - you have no chance to make this save or to be sure everything works like expected.

Even in Angular a component or in ionic Page is simply a class and is instanciated via the dependency Injector.

So you should use the lifecycle hooks like ngOnInit to do initially work. Because instanciation has finished, the @Input bindings have their initial value. Everything is ready to start working.

1 Like
7

Fair point. I have been bit by this when using reactive forms, however. Perhaps ngOnInit is good enough, but I have not yet found an Ionic lifecycle event that is early enough to properly initialize FormGroups using the FormBuilder.

8

i think ngOnInit should do it.

If you want to be earlier --> you can use ngOnChanges. This hook is called multiple times, but the first one is before ngOnInit.

9

noā€¦I have faced the same problem with reactive formsā€¦ I generally put the form within a <div *ngIf="form">

1 Like
10

Thank you for your help.
I want to be an expert like you.

11

yep, you need ng-if then.

But i think this should be changed in the angular source codeā€¦ --> a check if the form model is initialized or not :wink:

But as another workaround --> you could initialize your form with empty values in your constructor --> and set the new values afterwards :wink:

12

You need to pass as parameter in your construtor the Http you imported and you should use services to proccess ur requests