การใช้ ionic เรียก WebApi

สร้างโปรเจ็กส์ ASP.NET Core
สร้างโปรเจ็กส์ ionic
ผลการรัน

1. สร้างโปรเจ็กส์ ASP.NET Core

สร้างโปรเจ็กส์แบบ ASP.NET Core WebAPI in Azure

ValuesController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace JackWebAPI.Controllers
{
    [Route("api/[controller]")]
    public class ValuesController : Controller
    {
        // GET api/values
        [HttpGet]
        public IEnumerable<string> Get()
        {
            return new string[] { "Jack1", "Jack2" };
        }

        // GET api/values/5
        [HttpGet("{id}")]
        public string Get(int id)
        {
            return "Jack";
        }

        // POST api/values
        [HttpPost]
        public void Post([FromBody]string value)
        {
        }

        // PUT api/values/5
        [HttpPut("{id}")]
        public void Put(int id, [FromBody]string value)
        {
        }

        // DELETE api/values/5
        [HttpDelete("{id}")]
        public void Delete(int id)
        {
        }
    }
}

using System;

using System.Collections.Generic;

using System.Linq;

using System.Threading.Tasks;

using Microsoft.AspNetCore.Mvc;

namespace JackWebAPI.Controllers

{

[Route("api/[controller]")]

public class ValuesController : Controller

{

// GET api/values

[HttpGet]

public IEnumerable<string> Get()

{

return new string[] { "Jack1", "Jack2" };

}

// GET api/values/5

[HttpGet("{id}")]

public string Get(int id)

{

return "Jack";

}

// POST api/values

[HttpPost]

public void Post([FromBody]string value)

{

}

// PUT api/values/5

[HttpPut("{id}")]

public void Put(int id, [FromBody]string value)

{

}

// DELETE api/values/5

[HttpDelete("{id}")]

public void Delete(int id)

{

}

บรรทัดที่ 16 : เมื่อเรียก Get มา จะคืนค่าเป็น array of string Jack1 และ Jack2
บรรทัดที่ 23 : เมื่อเรียก Get แล้วใส่ id ใดๆมา จะคืนค่าเป็น string คำว่า Jack

2. สร้างโปรเจ็กส์ ionic

สร้างโปรเจ็กส์ ionic เรียกใช้ HTTP แบบ Native (GET)

home.html

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

<ion-content padding>
  <p>Status: {{stStatus}}</p>
  <p>Value: {{stValue}}</p>
  <button (click)="getString1()" ion-button color="primary" block>1. String(Jack)</button>
  <button (click)="getString2()" ion-button color="primary" block>2. String(["Jack1","Jack2"])</button>
  <button (click)="getArrString()" ion-button color="primary" block>3. Array of String</button>
</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Ionic Blank

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<p>Status: {{stStatus}}</p>

<p>Value: {{stValue}}</p>

<button (click)="getString1()" ion-button color="primary" block>1. String(Jack)</button>

<button (click)="getString2()" ion-button color="primary" block>2. String(["Jack1","Jack2"])</button>

<button (click)="getArrString()" ion-button color="primary" block>3. Array of String</button>

</ion-content>

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 {

  stStatus;
  stValue;
    
  constructor(public navCtrl: NavController, private http: HTTP) {
   this.stStatus = "";
   this.stValue = "";
  }

  getString1(){
    let url = 'http://jackwebapi25610824112107.azurewebsites.net/api/values/1';
    //let url = 'http://localhost:50172/api/values/1';
    console.log(url);

    this.http.get(url, {}, {})
      .then(resp => {
        this.stStatus = resp.status;
        this.stValue = resp.data;
        console.log("this.stStatus ", this.stStatus);
        console.log("this.stValue ", this.stValue);
      })
      .catch(error => {
        this.stStatus =  error.status;
        this.stValue =  error.error;
        console.log("this.stStatus ", this.stStatus);
        console.log("this.stValue ", this.stValue);
      });
  }

  getString2(){
    let url = 'http://jackwebapi25610824112107.azurewebsites.net/api/values';
    console.log(url);

    this.http.get(url, {}, {})
      .then(resp => {
        this.stStatus = resp.status;
        this.stValue = resp.data;
        console.log("this.stStatus ", this.stStatus);
        console.log("this.stValue ", this.stValue);
      })
      .catch(error => {
        this.stStatus =  error.status;
        this.stValue =  error.error;
        console.log("this.stStatus ", this.stStatus);
        console.log("this.stValue ", this.stValue);
      });
  }

  getArrString(){
    let url = 'http://jackwebapi25610824112107.azurewebsites.net/api/values';
    console.log(url);

    this.http.get(url, {}, {})
      .then(resp => {
        this.stStatus = resp.status;
        this.stValue = resp.data;
        let arrString = JSON.parse(resp.data);
        console.log("this.stStatus ", this.stStatus);
        console.log("this.stValue ", this.stValue);
        console.log("arrString[0] ", arrString[0]);
        console.log("arrString[1] ", arrString[1]);
      })
      .catch(error => {
        this.stStatus =  error.status;
        this.stValue =  error.error;
        console.log("this.stStatus ", this.stStatus);
        console.log("this.stValue ", this.stValue);
      });
  }
}

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 {

stStatus;

stValue;

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

this.stStatus = "";

this.stValue = "";

}

getString1(){

let url = 'http://jackwebapi25610824112107.azurewebsites.net/api/values/1';

//let url = 'http://localhost:50172/api/values/1';

console.log(url);

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

.then(resp => {

this.stStatus = resp.status;

this.stValue = resp.data;

console.log("this.stStatus ", this.stStatus);

console.log("this.stValue ", this.stValue);

})

.catch(error => {

this.stStatus = error.status;

this.stValue = error.error;

console.log("this.stStatus ", this.stStatus);

console.log("this.stValue ", this.stValue);

});

}

getString2(){

let url = 'http://jackwebapi25610824112107.azurewebsites.net/api/values';

console.log(url);

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

.then(resp => {

this.stStatus = resp.status;

this.stValue = resp.data;

console.log("this.stStatus ", this.stStatus);

console.log("this.stValue ", this.stValue);

})

.catch(error => {

this.stStatus = error.status;

this.stValue = error.error;

console.log("this.stStatus ", this.stStatus);

console.log("this.stValue ", this.stValue);

});

}

getArrString(){

let url = 'http://jackwebapi25610824112107.azurewebsites.net/api/values';

console.log(url);

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

.then(resp => {

this.stStatus = resp.status;

this.stValue = resp.data;

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

console.log("this.stStatus ", this.stStatus);

console.log("this.stValue ", this.stValue);

console.log("arrString[0] ", arrString[0]);

console.log("arrString[1] ", arrString[1]);

})

.catch(error => {

this.stStatus = error.status;

this.stValue = error.error;

console.log("this.stStatus ", this.stStatus);

console.log("this.stValue ", this.stValue);

});

}

3. ผลการรัน

เมื่อคลิกปุ่มที่ 1 ผลลัพธ์เป็น string คำว่า Jack

[code]
http://jackwebapi25610824112107.azurewebsites.net/api/values/1
home.ts:29 this.stStatus 200
home.ts:30 this.stValue Jack
[/code]

เมื่อคลิกปุ่มที่ 2 ผลลัพธ์เป็น string คำว่า [“Jack1″,”Jack2”]

[code]
home.ts:42 http://jackwebapi25610824112107.azurewebsites.net/api/values
home.ts:48 this.stStatus 200
home.ts:49 this.stValue ["Jack1","Jack2"]
[/code]

เมื่อคลิกปุ่มที่ 3 ผลลัพธ์เป็น array ของ string คือ string ตัวแรก Jack1 และ string ตัวสอง Jack2

[code]
home.ts:61 http://jackwebapi25610824112107.azurewebsites.net/api/values
home.ts:68 this.stStatus 200
home.ts:69 this.stValue ["Jack1","Jack2"]
home.ts:70 this.stValue[0] Jack1
home.ts:71 this.stValue[1] Jack2
[/code]

Phaisarn Sutheebanjard

blog.phaisarn.com

การใช้ ionic เรียก WebApi