Angularでhttp GETを使ってデータを受信する

AngularでJsonpを使ってデータを受信する方法を説明します。

ざっくりまとめると以下のような事をします。

HttpClientModuleをインポートする。
HttpClient.get()メソッドでリクエストする。

以下、サンプルコードと説明です。

まずapp.module.ts でHttpClientModule をimportします。

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
// ↓ここ追加
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule // ← ここ追加
  ],
  providers: [],
  bootstrap: [
    AppComponent
  ]
})

ちなみにこれを追加しておかないと実行時に以下のようなエラーが出ます。

Error: StaticInjectorError[HttpClient]: 
&nbsp; StaticInjectorError[HttpClient]: 
&nbsp; NullInjectorError: No provider for HttpClient!

次にサービスなどからhttpリクエストしてJsonpを処理します。

import { Injectable } from '@angular/core';
import { Hoge } from './hoge';
import { Observable, of } from 'rxjs';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { catchError, map, tap } from 'rxjs/operators';
const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json'})
};

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

  private hogeUrl = 'https://hoge.app/hoge';

  constructor(
    private http: HttpClient
  ) { }

  getHoge(): Observable<Hoge[]> {
    // ↓ hogeUrlにGETでリクエストします。レスポンスはHoge配列として返す。（ObservableでPublishする）
    return this.http.get<Hoge[]>(this.hogeUrl)
      .pipe(
        catchError(this.handleError('getHoge', []))
      )
  }

  private handleError<T> (operation = 'operation', result?: T) {
    return (error: any): Observable<T> => {
      console.error(error);
      return of(result as T);
    }
  }
}

あとはコンポーネントなどからSubscribeしてデータを取り出して使いましょう。

使い方はjsonpを使った場合と同じです。以下も参考にしてみてください。