ionic 개발 - HTTP 통신하기

0. 개발 환경

$ node -v
$ v12.16.0

$ npm -v
$ 6.13.4

$ ionic -v
$ 6.1.0

$ cordova -v
$ 9.0.0 (cordova-lib@9.0.1)

1. 프로젝트 생성

$ ionic start 프로젝트명 blank

2. http plugin 설치하기

$ ionic cordova plugin add cordova-plugin-advanced-http
$ npm install @ionic-native/http

3. app.module.ts에 추가하기

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

@NgModule({
  ...
  providers: [
    ...,
    HTTP
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

4. 통신을 위한 서비스 생성하기

$ ionic g service 서비스명

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

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

@Injectable({
  providedIn: 'root'
})
export class ApiHttpService {

  // 통신을 할 URL 주소 (서버 api)
  apiUrl = 'https://api.github.com/users';

  constructor(private http: HTTP) { }

  get() {
    return this.http.get(this.apiUrl, {}, {});
  }
}

apiUrl로 통신을 주고 받을 서버의 주소를 지정한다. 예제에서는 https://api.github.com/users를 사용하였다.

5. home page 작성하기

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-button expand="block" (click)="getData()">Get Data</ion-button>

  <ion-list>
    <ion-item *ngFor="let data of dataArray">
      <p><span>{{data.id}}</span> {{data.login}}</p>
    </ion-item>
  </ion-list>
</ion-content>

home page html에서는 데이터를 가져오는 함수를 실행할 버튼과 가져온 데이터에서 id와 login 정보를 보여줄 리스트를 생성한다.

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

import { ApiHttpService } from '../api-http.service';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  dataArray;

  constructor(private http: ApiHttpService) {}

  // 버튼 클릭 시 실행
  getData() {
    this.http.get().then(data => {
      console.log(data.data); // data received by server
      this.dataArray = JSON.parse(data.data);
    }).catch(error => {
      console.log(error.status);
      console.log(error.error); // error message as string
      console.log(error.headers);
    });
  }
}

home.page.ts에서는 버튼 클릭 시 ApiHttpService에서 제공하는 get 함수를 실행하고 http 통신을 한 결과를 받아서 dataArray를 생성한다. data.data 값이 string이기 때문에 JSON.parse()를 통해 Object로 타입을 전환해준다. 통신을 한 결과는 아래 사진과 같이 객체를 담은 배열이다. *ngFor를 통해 배열 내 객체에 하나 하나씩 접근해서 id와 login을 list로 출력한다.

6. 결과

https://github.com/hanbee1005/ionic_http

hanbee1005/ionic_http