ionic3: การเรียกใช้ HTTP GET แบบ Native

Supported platforms

Android
iOS
browser

Install the Cordova and Ionic Native plugins:
[code]
$ ionic cordova plugin add cordova-plugin-advanced-http
$ npm install –save @ionic-native/http
[/code]

แก้ไขไฟล์

src/app/app.module.ts
src/pages/home/home.html
src/pages/home/home.ts

1. src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

import { HTTP } from '@ionic-native/http';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    HTTP,
    { provide: ErrorHandler, useClass: IonicErrorHandler }
  ]
})
export class AppModule { }

import { BrowserModule } from '@angular/platform-browser';

import { ErrorHandler, NgModule } from '@angular/core';

import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

import { SplashScreen } from '@ionic-native/splash-screen';

import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';

import { HomePage } from '../pages/home/home';

import { HTTP } from '@ionic-native/http';

@NgModule({

declarations: [

MyApp,

HomePage

imports: [

BrowserModule,

IonicModule.forRoot(MyApp)

bootstrap: [IonicApp],

entryComponents: [

MyApp,

HomePage

providers: [

StatusBar,

SplashScreen,

HTTP,

{ provide: ErrorHandler, useClass: IonicErrorHandler }

]

})

export class AppModule { }

2. src/pages/home/home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <p>{{text}}</p>
</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Ionic Blank

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

</ion-content>

3. src/pages/home/home.ts

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

import { HTTP } from '@ionic-native/http';

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

  text: string;

  constructor(public navCtrl: NavController,
    private http: HTTP) {

    let url = 'https://swapi.co/api/films';
    console.log(url);

    this.http.get(url, {}, {})
      .then(data => {
        this.text = "then";
        console.log("then");
        console.log("status > " + data.status);
        console.log("data   > " + data.data); // data received by server
        console.log("headers> " + data.headers);
      })
      .catch(error => {
        this.text = "catch";
        console.log("catch");
        console.log("status > " + error.status);
        console.log("data   > " + error.error); // error message as string
        console.log("headers> " + error.headers);
      });
  }
}

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

import { HTTP } from '@ionic-native/http';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

text: string;

constructor(public navCtrl: NavController,

private http: HTTP) {

let url = 'https://swapi.co/api/films';

console.log(url);

this.http.get(url, {}, {})

.then(data => {

this.text = "then";

console.log("then");

console.log("status > " + data.status);

console.log("data > " + data.data); // data received by server

console.log("headers> " + data.headers);

})

.catch(error => {

this.text = "catch";

console.log("catch");

console.log("status > " + error.status);

console.log("data > " + error.error); // error message as string

console.log("headers> " + error.headers);

});

}

ถ้าเชื่อมต่อไม่ได้ ให้ฟ้อง Error แก้ไขโค๊ดดังนี้
src/pages/home/home.ts

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

import { HTTP } from '@ionic-native/http';
import { AlertController } from 'ionic-angular';

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

  text: string;

  constructor(public navCtrl: NavController,
    private http: HTTP,
    public alertCtrl: AlertController) {

    let url = 'https://swapi.co/api/filmsxxx';
    console.log(url);

    this.http.get(url, {}, {})
      .then(data => {
        this.text = "then";
        console.log("then");
        console.log("status > " + data.status);
        console.log("data   > " + data.data); // data received by server
        console.log("headers> " + data.headers);
      })
      .catch(error => {
        this.text = "catch";
        console.log("catch");
        console.log("status > " + error.status);
        console.log("data   > " + error.error); // error message as string
        console.log("headers> " + error.headers);

        let alert = this.alertCtrl.create({
          title: 'Cannot connect to server!',
          message: 'Please check the server settings.',
          buttons: ['Ok']
        });
        alert.present()
      });
  }
}

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

import { HTTP } from '@ionic-native/http';

import { AlertController } from 'ionic-angular';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

text: string;

constructor(public navCtrl: NavController,

private http: HTTP,

public alertCtrl: AlertController) {

let url = 'https://swapi.co/api/filmsxxx';

console.log(url);

this.http.get(url, {}, {})

.then(data => {

this.text = "then";

console.log("then");

console.log("status > " + data.status);

console.log("data > " + data.data); // data received by server

console.log("headers> " + data.headers);

})

.catch(error => {

this.text = "catch";

console.log("catch");

console.log("status > " + error.status);

console.log("data > " + error.error); // error message as string

console.log("headers> " + error.headers);

let alert = this.alertCtrl.create({

title: 'Cannot connect to server!',

message: 'Please check the server settings.',

buttons: ['Ok']

});

alert.present()

});

}

รันด้วยแพลตฟอร์ม browser
[code]
> ionic cordova platform rm browser
> ionic cordova platform add browser
> ionic cordova run browser
[/code]

Link

Phaisarn Sutheebanjard

blog.phaisarn.com

ionic3: การเรียกใช้ HTTP GET แบบ Native