Ionic: การเรียกใช้ HTTP แบบ Native (GET) แกะค่า JSON

Supported platforms

Android
iOS
browser

สร้างแอพ

[code]
> ionic start myApp blank
> cd myApp
[/code]

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';
    let url = 'https://projects.voutlook.com:443/webapi/themes/gettheme';
    console.log(url);

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

        let yy = JSON.parse(resp.data);
        console.log("yy > " + yy);
        console.log("ThemeID > " + yy['ThemeID']);
        console.log("Color > " + yy['Color']);
        console.log("Image > " + yy['Image']);
      })
      .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';

let url = 'https://projects.voutlook.com:443/webapi/themes/gettheme';

console.log(url);

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

.then(resp => {

this.text = "then";

console.log("then");

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

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

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

let yy = JSON.parse(resp.data);

console.log("yy > " + yy);

console.log("ThemeID > " + yy['ThemeID']);

console.log("Color > " + yy['Color']);

console.log("Image > " + yy['Image']);

})

.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);

});

}

รันด้วยแพลตฟอร์ม browser

[code]
> ionic cordova platform rm browser
> ionic cordova platform add browser
> ionic cordova run browser
[/code]

Link

Phaisarn Sutheebanjard

blog.phaisarn.com

Ionic: การเรียกใช้ HTTP แบบ Native (GET) แกะค่า JSON