HttpModule vs HttpClientModule：どちらを選ぶべきか？

AngularにおけるHttpModuleとHttpClientModuleの比較

HttpModule

• Angular 1.xで使用されていた従来のモジュール
• XMLHttpRequestオブジェクトをベースにしており、シンプルなAPIを提供
• 多くのブラウザで動作するため、古いブラウザのサポートが必要な場合に有効
• 以下の機能を提供
  • GET、POST、PUT、DELETEなどの基本的なHTTPメソッド
  • リクエストヘッダーの設定
  • レスポンスデータの取得

• ObservableベースのAPIを提供し、より柔軟で強力な機能を持つ
• RxJSとの統合により、データストリーミングやエラー処理などが容易
• 以下の機能を提供

どちらを選択すべきか

• 以下の点を考慮して選択する必要があります。

  • アプリケーションの要件
  • ブラウザのサポート状況
  • 開発者のスキルセット

• 以下の状況ではHttpClientModuleの使用が推奨されます。

  • Angular 4.x以降を使用している
  • 最新のブラウザを対象としている
  • RxJSに慣れている
  • より柔軟で強力なHTTP機能が必要
• • 古いブラウザをサポートする必要がある
  • シンプルなHTTP通信のみを行う

補足

• 上記は基本的な比較であり、詳細については各モジュールのドキュメントを参照してください。
• どちらのモジュールを選択する場合でも、セキュリティ対策を講じる必要

HttpModule

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

import { AppComponent } from './app.component';

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

export class AppComponent {
  constructor(private http: Http) {}

  getData() {
    this.http.get('https://api.github.com/users/angular')
      .subscribe(response => {
        console.log(response.json());
      });
  }
}

HttpClientModule

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

import { AppComponent } from './app.component';

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

export class AppComponent {
  constructor(private http: HttpClient) {}

  getData() {
    this.http.get('https://api.github.com/users/angular')
      .subscribe(response => {
        console.log(response);
      });
  }
}

AngularでHTTP通信を行うその他の方法

Angular CLIのhttpClientコマンドを使用すると、簡単にHTTP通信を行うためのコードを生成することができます。 以下のコマンドを実行すると、get、post、put、deleteなどの基本的なHTTPメソッドを呼び出すためのコードが生成されます。

ng generate httpClient <service-name>

生成されたコードは以下の内容になります。

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

export class MyService {
  constructor(private http: HttpClient) {}

  getData() {
    return this.http.get('https://api.github.com/users/angular');
  }
}

RxJSのajax()メソッドを使用すると、ObservableベースのAPIを使ってHTTP通信を行うことができます。 以下のコードは、ajax()メソッドを使ってGETリクエストを行う例です。

import { ajax } from 'rxjs/ajax';

ajax.get('https://api.github.com/users/angular')
  .subscribe(response => {
    console.log(response);
  });

Axiosライブラリは、PromiseベースのAPIを使ってHTTP通信を行うためのライブラリです。 以下のコードは、Axiosライブラリを使ってGETリクエストを行う例です。

import axios from 'axios';

axios.get('https://api.github.com/users/angular')
  .then(response => {
    console.log(response.data);
  });

Fetch APIは、ブラウザの標準機能であるAPIを使ってHTTP通信を行うことができます。 以下のコードは、Fetch APIを使ってGETリクエストを行う例です。

fetch('https://api.github.com/users/angular')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  });

どの方法を選択すべきかは、以下の点を考慮して決定する必要があります。

• • 開発時間を短縮したい

• 以下の状況では、RxJSのajax()メソッドの使用が検討されます。
• • PromiseベースのAPIを使用したい
  • 他のライブラリとの互換性を考慮したい
• • ブラウザの標準機能のみを使用したい
  • 軽量なライブラリを使用したい

HttpModuleとHttpClientModule以外にも、AngularでHTTP通信を行う方法はいくつかあります。 上記の情報を参考に、ニーズに合った方法を選択して開発を進めてください。