Angular HttpClient を利用した HTTP 通信

Angular で HTTP 通信を行う際には、HttpClient を利用します。

設定内容

app.module.ts

@angular/common/http にある HttpClientModule をインポートします。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

HttpClient を DI で参照します。HttpClient は HTTP 通信の動詞(get, post, put, delete など) に対応するメソッドが用意されています。用途に合うメソッドを呼び出します。ここでは、get メソッドでリソースの取得を行っています。データは subscribe することで取得することができます。

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'angular-httpclient';

  constructor(private http: HttpClient) { }

  getData() {
    this.http.get('https://jsonplaceholder.typicode.com/todos/1').subscribe(response => {
      console.log(response);
    });
  }
}

app.component.html

参考までに、AppComponent に対応する HTML テンプレートの実装を記述しておきます。

<button (click)="getData()">http 通信</button>

実行結果

ボタンをクリックすると、コンソールに HTTP 通信で取得したデータが出力されているのが分かります。

サンプル

※ HTTP 通信をする際に、サーバー側でクロスオリジン制約により通信が弾かれてしまう場合、制限を解除して通信を行ってください。

参考：ASP.NET Core Web API クロスオリジンを許可する方法
https://watermargin.net/programming/asp-net-core/asp-net-core-web-api-cors/