[ionic] http 元件

在 ionic 裡使用 http 元件時：
https://ionicframework.com/docs/native/http/

遇到Error: Uncaught (in promise): Error: StaticInjectorError[HTTP]: 的 error，發生的原因是沒有加入到 providers 清單裡，加入的範例，檔案在 /src/app/app.module.ts :

Add Plugins to Your App’s Module

After installing a plugin’s package, add it to your app’s NgModule.

...

import { Camera } from '@ionic-native/camera';

...

@NgModule({
  ...

  providers: [
    ...
    Camera
    ...
  ]
  ...
})
export class AppModule { }

如果是透過 ‘@angular/http’ 範例如下：

‘@angular/http’ 的在 “/src/app/app.module.ts” 設定：

import { Http } from ‘@angular/http’;
import { HttpModule } from ‘@angular/http’;

..

..

imports: [
BrowserModule,
HttpModule,
IonicModule.forRoot(MyApp)
],

GET Example

this.posts = null;

this.http.get('https://www.reddit.com/r/gifs/top/.json?limit=2&sort=hot').map(res => res.json()).subscribe(data => {
    this.posts = data.data.children;
});

console.log(this.posts);

https://www.joshmorony.com/using-http-to-fetch-remote-data-from-a-server-in-ionic-2/

POST Example

let headers = new Headers();
headers.append('Content-Type', 'application/json');

let body = { 
  message:"do you hear me?"
};

this.http.post('http://spstest.000webhostap..., JSON.stringify(body), {headers: headers})
 .map(res => res.json())
 .subscribe(data => {
   console.log(data);
  });
}

如果是要取 html 而不是 json，範例：

var response = this.http.get(link);
response.subscribe(
res => {
console.log(res.text());
let alert = this.alerCtrl.create({
title: ‘Responsed!’,
message: res.text(),
buttons: [‘Ok’]
});
alert.present()
},
err => {
console.log(err);
},
() => console.log(‘call http API Complete’)
);