【Angular】HttpClientModuleによるサーバ=クライアント通信

2021年12月11日

フロントエンド開発をしていると大体APIなどを実行して、バックエンド側にデータを渡したり、取得したデータをもとに画面表示をしたりするかと思います。
Angularの開発の場合は、どのように通信をするのかを今回は紹介していこうかと思います。

スポンサーリンク

HttpClientModuleをインポート

app.module.tsでHttpClientModuleをインポートしていきましょう。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule,ReactiveFormsModule } from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';
import { HttpClientModule} from '@angular/common/http';

import { AppComponent } from './app.component';
import { RingoComponent } from './ringo/ringo.component';
import { AppleComponent} from './apple/apple.component';
import { HomeComponent } from './home/home.component';

const route:Routes = [
  {path: 'ringo', component:RingoComponent},
  {path: 'apple', component:AppleComponent},
];

@NgModule({
  declarations: [
    AppComponent,
    RingoComponent,
    AppleComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    RouterModule.forRoot(
      route
    )
  ],
  providers: [],
  bootstrap: [HomeComponent]
})
export class AppModule { }

頭のimportを書いている部分に

import { HttpClientModule} from '@angular/common/http';

のインポート文を追記します。
そしてNgModuleデコレータのimportの部分にHttpClientModuleを追加してください。

Getメソッドでサーバーに通信する

サーバーへのアクセスには、HttpClientというクラスを使います。
サーバへの通信をするクラスを修正していきましょう。
(たいていの場合、Angularでは詳細な処理をサービスクラスにまとめて定義するので、そこに通信用のメソッドも定義していくとよいです。)
文頭に以下のインポート文を追記してください。

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

次にクラスのコンストラクタにHttpClientの引数を追加してください。

constructor(
  private httpClient: HttpClient
) {}

ここまで用意したうえで、メソッドの中にこのようにgetメソッドを書きます。

this.httpClient.get('○○○○(URL)');

ここの引数に指定したURLにアクセスしていきます。
ここで気を付けてほしいのは、これだけだと単に通信するだけということです。
リクエストしたAPIから取得したデータをもとに画面表示をしたり等の処理は一切しません。
ただ非同期で通信するだけです。

通信終了後の処理を定義する

例えばGETメソッドで通信して、そこから取得したデータをもとに何かしらの処理を行う場合、subscribeというメソッドで定義していきます。

this.httpClient.get('○○○○(URL)').subscribe(result =>{
  //通信後の処理を書いていく
});

resultというのが、受け取ったデータのことです。
今回は特に型を指定していませんが、ちゃんと開発する際は受け取るデータ構造に沿ったクラスを定義し、その型で受け取るようにしてください。

this.httpClient.get('○○○○(URL)').subscribe((result:○○(クラス)) =>{
  //通信後の処理を書いていく
});

こんな感じですね。
ちなみに受け取ったデータを使わないのであれば、resultを記載しなくても良いです。

this.httpClient.get('○○○○(URL)').subscribe(() =>{
  //通信後の処理を書いていく
});

パラメータを指定する

GETメソッドにパラメータを指定したうえで通信したい場合、
最悪URLの最後に「?○○=△△」みたいに追記していってもいいですが、paramsを指定する方がスマートです。

this.httpClient.get('○○○○(URL)',{
  params: {parameter:"○○○○"}
})
.subscribe(result =>{
  //通信後の処理を書いていく
});

paramsにこのように記載されると、GETパラメータとして「?parameter= ○○○○ 」という形でリクエストします。

POSTメソッドでサーバーに通信する

ではPOSTで通信したい際はどうすれば良いかも紹介していきます。

this.httpClient.post('○○○○(URL)',param).subscribe(result =>{
  //通信後の処理を書いていく
});

ほぼGETと同じですね。
大きな違いとして2つ目の引数を指定していますが、これはリクエストのボディの部分を指定しています。
このボディ用にこんな感じでクラスをあらかじめ定義しておきます

class Ringo{
  apple:string;
  constructor(apple:string){
    this.apple = apple;
  }
}
const param = new Ringo("example");

だいぶ適当に作りましたが、この場合だとボディは

{
  "apple":"example"
}

このような形で送られます。
例えばPOSTメソッドを使ってAPIにリクエストを送る場合は、API側のリクエストパラメータに沿った形でクラスを定義するよう気をつけてください。
または、フォーム画面からAPIを実行する場合は、こちらの記事をもとにJSONを作成して送ってみると良いです。

終わりに

今回基本的なHttpリクエストの実装方法を紹介していきました。
HttpClientModule以外にもfetchを使ったやり方などもありますので、今後紹介していくかもしれません。

スポンサーリンク

Angular開発

Posted by 社畜林檎