HTTP を用いて非同期で情報を取得する単純な例

ここでは「HTTP を用いて非同期で情報を取得する例」より、もっと単純化して HTTP を利用する例を示します。

前のページの例ではちゃんと、車を表すモデルクラスを作成して、そのモデルのプロバイダを実装した上で利用しました。ここではもっと簡略化して、HTTP 呼び出しの部分だけに焦点をあてて、なるべく短い簡単なコードにします。

ここでは「HTTP を用いて非同期で情報を取得する例」で使った、次のような JSON 文字列を返すスクリプトを car.php として保存して使います。

また UI フレームワークは Ionic を使ってます。Ionic については次のサイトをみてください。

Ionic 入門

Ionic は Angular と Cordova の上に構築される UI フレームワークです。

ここで作成するプログラムを実行すると、はじめは次のようにボタンが一つあり・・・

ボタンを押したときに、バックエンドで HTTP リクエストを送信してデータを取得し、その結果を出力します。

これを実現するために HttpModule を使います。

HttpModule の取り込み

src/app/app.module.ts で HttpModule を取り込みます。

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { HttpModule } from '@angular/http';

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

ページテンプレート src/pages/home/home.html は次の通り。

<ion-header>
  <ion-navbar>
    <ion-title>
      HTTP TEST
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <button ion-button (click)="onClick()">TEST</button>
  <div *ngIf="result">{{result}}</div>
</ion-content>

Ionic では ion-content タグ内がページのコンテンツです。ここではボタンと div 要素が置いてあります。

HTTP リクエストを送るページの ts コード src/pages/home/home.ts は次の通りです。

import { Component } from '@angular/core';
import { Http, RequestOptionsArgs } from '@angular/http';

import 'rxjs/add/operator/toPromise';

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

  result: string;

  constructor(public http: Http) {}

  onClick(){
    this.sendReq();
  }

  sendReq(){
    let url: string = `http://localhost/car.php`;

    let options:RequestOptionsArgs = {
      //params: `param1=xyz`
    };

    // HTTP リクエストの送信
    this.http.get(url,options)
    .toPromise()
    .then((resp)=>{
      console.log(resp);
      let car = JSON.parse(resp.text());
      this.result = `${car.make} ${car.name} ${car.year}`;
    })
    .catch((err)=>{
      console.log(err);
    });
  }
}

ここではディペンデンシ・インジェクションで Http のオブジェクトを受け取り、その get メソッドで HTTP 要求を送信しています。

toPromise を使って、Observables ではなく Promise として結果を受け取り、then にて JSON から受け取った文字列を表示しています。

パラメータをつける場合は、URL にクエリ文字列につけても良いですし、あるいは RequestOptionsArgs の params に設定しても OK です。

Access-Control-Allow-Origin ヘッダーなどに起因するエラーの解決については、「HTTP を用いて非同期で情報を取得する例」をみてください。

ホーム » Angular の基礎