HTTP リクエストを行う

HttpClient には、データの読み込みとサーバーへの変更の適用に使用されるさまざまなHTTP動詞に対応するメソッドがあります。各メソッドはRxJS Observable を返し、これはサブスクライブされるとリクエストを送信し、サーバーが応答すると結果を発行します。

リクエストメソッドに渡されるオプションオブジェクトを通じて、リクエストのさまざまなプロパティと返されるレスポンスタイプを調整できます。

JSON データの取得

バックエンドからデータを取得するには、多くの場合、HttpClient.get() メソッドを使用してGETリクエストを行う必要があります。このメソッドは、2つの引数を取ります。1つ目は、フェッチする文字列のエンドポイントURL、2つ目はリクエストを構成するためのオプションオブジェクトです（省略可能）。

たとえば、HttpClient.get() メソッドを使用して、仮説上のAPIから構成データを取得するには、次のようになります。

http.get<Config>('/api/config').subscribe(config => {  // 構成を処理します。});

サーバーによって返されるデータが Config 型であることを指定するジェネリック型引数に注意してください。この引数は省略可能であり、省略すると、返されるデータは Object 型になります。

CTIRICAL: リクエストメソッドのジェネリック型は、サーバーによって返されるデータに関するアサーションです。HttpClient は、実際の戻り値データがこの型と一致することを検証しません。

他のタイプのデータの取得

デフォルトでは、HttpClient はサーバーがJSONデータを返すことを想定しています。JSON以外のAPIと対話する場合、HttpClient にリクエストを行うときに期待されるレスポンス型と返す型を伝えることができます。これは、responseType オプションを使用して行います。

たとえば、HttpClient に .jpeg イメージの生のバイトを ArrayBuffer にダウンロードするように依頼できます。

http.get('/images/dog.jpg', {responseType: 'arraybuffer'}).subscribe(buffer => {  console.log('画像は ' + buffer.byteLength + ' バイトです');});

サーバーの状態を変更する

変更を伴うサーバーAPIは多くの場合、新しい状態または行うべき変更を指定したリクエストボディを使用してPOSTリクエストを行う必要があります。

HttpClient.post() メソッドは get() と同様に動作し、オプションの前に body 引数を追加で受け取ります。

http.post<Config>('/api/config', newConfig).subscribe(config => {  console.log('更新された構成:', config);});

さまざまなタイプの値をリクエストの body として提供でき、HttpClient はそれに応じてシリアル化します。

URL パラメータの設定

リクエストURLに含めるべきリクエストパラメータは、params オプションを使用して指定します。

オブジェクトリテラルを渡すことは、URLパラメータを構成するための最も簡単な方法です。

http.get('/api/config', {  params: {filter: 'all'},}).subscribe(config => {  // ...});

あるいは、パラメータの構築やシリアル化をより細かく制御する必要がある場合は、HttpParams のインスタンスを渡します。

const baseParams = new HttpParams().set('filter', 'all');http.get('/api/config', {  params: baseParams.set('details', 'enabled'),}).subscribe(config => {  // ...});

HttpParams を、HttpClient がパラメータをURLにエンコードする方法を決定するカスタム HttpParameterCodec でインスタンス化できます。

リクエストヘッダーの設定

リクエストに含めるべきリクエストヘッダーは、headers オプションを使用して指定します。

オブジェクトリテラルを渡すことは、リクエストヘッダーを構成するための最も簡単な方法です。

http.get('/api/config', {  headers: {    'X-Debug-Level': 'verbose',  }}).subscribe(config => {  // ...});

あるいは、ヘッダーの構築をより細かく制御する必要がある場合は、HttpHeaders のインスタンスを渡します。

const baseHeaders = new HttpHeaders().set('X-Debug-Level', 'minimal');http.get<Config>('/api/config', {  headers: baseHeaders.set('X-Debug-Level', 'verbose'),}).subscribe(config => {  // ...});

サーバーレスポンスイベントとの対話

便宜上、HttpClient はデフォルトでサーバーによって返されるデータ（レスポンスボディ）の Observable を返します。場合によっては、特定のレスポンスヘッダーを取得するなど、実際のレスポンスを調べる必要がある場合もあります。

レスポンス全体にアクセスするには、observe オプションを 'response' に設定します。

http.get<Config>('/api/config', {observe: 'response'}).subscribe(res => {  console.log('レスポンスステータス:', res.status);  console.log('ボディ:', res.body);});

生の進捗イベントを受信する

HttpClient は、レスポンスボディとレスポンスオブジェクトに加えて、リクエストライフサイクルの特定の時点に対応する生のイベントのストリームを返せます。これらのイベントには、リクエストが送信されたとき、レスポンスヘッダーが返されたとき、ボディが完了したときなどが含まれます。これらのイベントには、大きなリクエストボディとレスポンスボディのアップロードとダウンロードの状態を報告する進捗イベントも含まれる場合があります。

進捗イベントは、デフォルトでは無効になっています（パフォーマンス上のコストがかかるため）が、reportProgress オプションを使用して有効にできます。

イベントストリームを観察するには、observe オプションを 'events' に設定します。

http.post('/api/upload', myData, {  reportProgress: true,  observe: 'events',}).subscribe(event => {  switch (event.type) {    case HttpEventType.UploadProgress:      console.log('Uploaded ' + event.loaded + ' out of ' + event.total + ' bytes');      break;    case HttpEventType.Response:      console.log('Finished uploading!');      break;  }});

イベントストリームで報告される各 HttpEvent には、イベントを表す type があります。

リクエスト失敗の処理

HTTPリクエストは、次の3つの方法で失敗する可能性があります。

• ネットワークエラーまたは接続エラーにより、リクエストがバックエンドサーバーに到達できない場合があります。
• timeoutオプションが設定されている場合に、リクエストが時間内に応答しませんでした。
• バックエンドがリクエストを受け取りますが、処理に失敗し、エラーレスポンスを返す場合があります。

HttpClient は、上記のすべての種類のエラーを HttpErrorResponse に捕捉し、Observable のエラーチャネルを通じて返します。ネットワークエラーとタイムアウトエラーの status コードは 0 で、error は ProgressEvent のインスタンスです。バックエンドエラーの status コードは、バックエンドによって返された失敗したコードであり、error はエラーレスポンスです。レスポンスを調べて、エラーの原因とエラーを処理するための適切なアクションを特定します。

RxJS ライブラリ は、エラー処理に役立つ演算子をいくつか提供しています。

catchError 演算子を使用して、エラーレスポンスをUI用の値に変換できます。この値は、UIにエラーページまたは値を表示し、必要に応じてエラーの原因を捕捉します。

ネットワークの中断など、一時的なエラーにより、予期せずリクエストが失敗することがあります。リクエストを再試行するだけで成功する場合があります。RxJSは、特定の条件下で失敗した Observable に自動的に再購読する、複数の再試行演算子を提供しています。たとえば、retry() 演算子は、指定された回数だけ自動的に再サブスクライブを試みます。

タイムアウト

リクエストにタイムアウトを設定するには、他のリクエストオプションと一緒に timeout オプションをミリ秒数に設定できます。バックエンドリクエストが指定された時間内に完了しない場合、リクエストは中止され、エラーが発行されます。

http.get('/api/config', {  timeout: 3000,}).subscribe({  next: config => {    console.log('設定の取得に成功:', config);  },  error: err => {    // リクエストがタイムアウトした場合、エラーが発行されます。  }});

高度な fetch オプション

withFetch() プロバイダーを使用する場合、Angularの HttpClient は、パフォーマンスとユーザー体験を改善できる高度なfetch APIオプションへのアクセスを提供します。これらのオプションは、fetchバックエンドを使用する場合にのみ利用できます。

Fetch オプション

以下のオプションは、fetchバックエンドを使用する際のリクエスト動作を細かく制御します。

Keep-alive 接続

keepalive オプションにより、リクエストはそれを開始したページよりも長く存続できます。これは、ユーザーがページから移動した場合でも完了する必要がある分析やログリクエストに特に有用です。

http.post('/api/analytics', analyticsData, {  keepalive: true}).subscribe();

HTTP キャッシュ制御

cache オプションは、リクエストがブラウザのHTTPキャッシュとどのように相互作用するかを制御し、繰り返しリクエストのパフォーマンスを大幅に改善できます。

//  新鮮度に関係なくキャッシュされたレスポンスを使用http.get('/api/config', {  cache: 'force-cache'}).subscribe(config => {  // ...});// 常にネットワークから取得、キャッシュをバイパスhttp.get('/api/live-data', {  cache: 'no-cache'}).subscribe(data => {  // ...});// キャッシュされたレスポンスのみを使用、キャッシュにない場合は失敗http.get('/api/static-data', {  cache: 'only-if-cached'}).subscribe(data => {  // ...});

Core Web Vitals のためのリクエスト優先度

priority オプションを使用すると、リクエストの相対的な重要度を示すことができ、ブラウザがより良いCore Web Vitalsスコアのためにリソースの読み込みを最適化するのに役立ちます。

// 重要なリソースの高優先度http.get('/api/user-profile', {  priority: 'high'}).subscribe(profile => {  // ...});// 重要でないリソースの低優先度http.get('/api/recommendations', {  priority: 'low'}).subscribe(recommendations => {  // ...});// 自動優先度 (デフォルト) はブラウザーが決定http.get('/api/settings', {  priority: 'auto'}).subscribe(settings => {  // ...});

利用可能な priority 値：

• 'high': 高優先度、早期に読み込まれる（例：重要なユーザーデータ、above-the-foldコンテンツ）
• 'low': 低優先度、リソースが利用可能なときに読み込まれる（例：分析、プリフェッチデータ）
• 'auto': ブラウザがリクエストコンテキストに基づいて優先度を決定（デフォルト）

リクエストモード

mode オプションは、リクエストがクロスオリジンリクエストを処理する方法を制御し、レスポンスタイプを決定します。

// 同一オリジンリクエストのみhttp.get('/api/local-data', {  mode: 'same-origin'}).subscribe(data => {  // ...});// CORS が有効なクロスオリジンリクエストhttp.get('https://api.external.com/data', {  mode: 'cors'}).subscribe(data => {  // ...});// シンプルなクロスオリジンリクエストの No-CORS モードhttp.get('https://external-api.com/public-data', {  mode: 'no-cors'}).subscribe(data => {  // ...});

利用可能な mode 値：

• 'same-origin': 同一オリジンリクエストのみを許可、クロスオリジンリクエストは失敗
• 'cors': CORSでクロスオリジンリクエストを許可（デフォルト）
• 'no-cors': CORSなしでシンプルなクロスオリジンリクエストを許可、レスポンスは不透明

リダイレクト処理

redirect オプションは、サーバーからのリダイレクトレスポンスを処理する方法を指定します。

// リダイレクトを自動的に追跡（デフォルトの動作）http.get('/api/resource', {  redirect: 'follow'}).subscribe(data => {  // ...});// 自動リダイレクトを防ぐhttp.get('/api/resource', {  redirect: 'manual'}).subscribe(response => {  // リダイレクトを手動で処理});// リダイレクトをエラーとして扱うhttp.get('/api/resource', {  redirect: 'error'}).subscribe({  next: data => {    // 成功レスポンス  },  error: err => {    // リダイレクトレスポンスはこのエラーハンドラーをトリガーします  }});

利用可能な redirect 値：

• 'follow': リダイレクトを自動的に追跡（デフォルト）
• 'error': リダイレクトをエラーとして扱う
• 'manual': リダイレクトを自動的に追跡せず、リダイレクトレスポンスを返す

認証情報の処理

credentials オプションは、Cookie、認証ヘッダー、その他の認証情報がクロスオリジンリクエストと一緒に送信されるかどうかを制御します。これは認証シナリオで特に重要です。

// クロスオリジンリクエストに認証情報を含めるhttp.get('https://api.example.com/protected-data', {  credentials: 'include'}).subscribe(data => {  // ...});// 認証情報を送信しない（クロスオリジンのデフォルト）http.get('https://api.example.com/public-data', {  credentials: 'omit'}).subscribe(data => {  // ...});// 同一オリジンリクエストのみに認証情報を送信http.get('/api/user-data', {  credentials: 'same-origin'}).subscribe(data => {  // ...});// withCredentials は credentials 設定を上書きしますhttp.get('https://api.example.com/data', {  credentials: 'omit',        // これは無視されます  withCredentials: true       // これにより credentials: 'include' が強制されます}).subscribe(data => {  // credentials: 'omit' にもかかわらず、リクエストは認証情報を含みます});// レガシーアプローチ（まだサポートされています）http.get('https://api.example.com/data', {  withCredentials: true}).subscribe(data => {  // credentials: 'include' と同等});

利用可能な credentials 値：

• 'omit': 認証情報を送信しない
• 'same-origin': 同一オリジンリクエストのみに認証情報を送信（デフォルト）
• 'include': クロスオリジンリクエストでも常に認証情報を送信

Http Observable

HttpClient の各リクエストメソッドは、要求されたレスポンス型の Observable を構築して返します。これらの Observable の仕組みを理解することは、HttpClient を使用する場合に重要です。

HttpClient は、RxJSが「コールド」と呼ぶ Observable を生成します。つまり、Observable がサブスクライブされるまでは、実際のリクエストは行われません。リクエストが実際にサーバーに送信されるのは、そのときだけです。同じ Observable を複数回購読すると、複数のバックエンドリクエストがトリガーされます。各サブスクライブは独立しています。

Tip: HttpClient の Observable は、実際のリクエストのブループリントと考えることができます。

いったんサブスクライブされると、アン購読すると、進行中のリクエストが中止されます。これは、Observable が async パイプを使用してサブスクライブされている場合に非常に便利です。ユーザーが現在のページから移動すると、リクエストが自動的にキャンセルされます。さらに、Observable を switchMap などのRxJSコンビネータと使用する場合、このキャンセルによって、古いリクエストがすべてクリーンアップされます。

レスポンスが返されると、HttpClient からの Observable は通常完了します（ただし、インターセプターがこれに影響を与える可能性があります）。

自動完了のため、HttpClient のサブスクライブがクリーンアップされなくても、通常はメモリリークのリスクはありません。ただし、他の非同期操作と同様に、サブスクライブを使用しているコンポーネントが破棄されたときにサブスクライブをクリーンアップすることを強くお勧めします。そうしないと、サブスクライブコールバックが実行され、破棄されたコンポーネントと対話するときにエラーが発生する可能性があります。

Tip: async パイプまたは toSignal 演算子を使用して Observable に購読すると、サブスクライブが適切に破棄されます。

ベストプラクティス

HttpClient はコンポーネントから直接注入して使用できますが、一般的にはデータアクセスロジックを分離してカプセル化する、再利用できる注入可能なサービスを作成することをお勧めします。たとえば、この UserService は、IDでユーザーのデータをリクエストするロジックをカプセル化しています。

@Injectable({providedIn: 'root'})export class UserService {  private http = inject(HttpClient);  getUser(id: string): Observable<User> {    return this.http.get<User>(`/api/user/${id}`);  }}

コンポーネント内で、@if を async パイプと組み合わせて、データの読み込みが完了した後にのみ、データのUIをレンダリングできます。

import { AsyncPipe } from '@angular/common';@Component({  imports: [AsyncPipe],  template: `    @if (user$ | async; as user) {      <p>名前: {{ user.name }}</p>      <p>経歴: {{ user.biography }}</p>    }  `,})export class UserProfileComponent {  userId = input.required<string>();  user$!: Observable<User>;  private userService = inject(UserService);  constructor(): void {    effect(() => {      this.user$ = this.userService.getUser(this.userId());    });  }}