見出し画像

Angular_HttpClientでバックエンド通信する　#344日目

ゆーき|YM202110

SPAで開発している時、フロントからバックエンド通信を行いますが、Angularにおいてその役割を果たしてくれるのが「HttpClient」モジュールです。

その使い方をメモしておきたいと思います。

まずapp.module.tsにインポートします。

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

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule　// HttpClientModuleはBrowserModuleの後に追加する。
  ],
  declarations: [
    AppComponent,
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

HttpClientを使用するサービスのconstructorで宣言すれば使えるようになります。

export class CardService {
  constructor(
    private httpClient: HttpClient,
  ) {}

HttpClientを使用する場合、レスポンスは基本的にObservableタイプで受け取ることになります。例えば認証情報をヘッダーにセットしてGETリクエストを送る場合、以下のように記述できます。

const token = 'XXXXXXXXXX'
const httpOptins = {
    headers: new HttpHeaders().set('X-HTTP-AUTH-TOKEN', token)
}

this.httpClient.get('バックエンドAPIのURL', httpOptions).pipe(
    map((response: any) => {
        const apiResponse = resonse;
        return apiResponse;
    }),
    catchError(error => {
        console.error(error);
        return observableThrowError('errorです');
    })
);


フロントとバックエンドを繋ぐ部分が理解できてくると、アプリ全体への理解も深まりそうです。

ここまでお読みいただきありがとうございました！


参考


いいなと思ったら応援しよう！