HttpClient はどのように動作しますか？

Question

Accepted Answer

**`HttpClient`** は Angular の組み込みサービスで、HTTP リクエストを送信するために使用されます。**Observables** (Promise ではなく) を返し、RxJS オペレータと統合され、型付きレスポンス、インターセプタ、エラーハンドリングをサポートしています。 ## 基本的な使用方法 ```ts import { HttpClient } from "@angular/common/http"; import { Injectable } from "@angular/core"; @Injectable({ providedIn: "root" }) export class UserService { constructor(private http: HttpClient) {} getUsers() { return this.http.get("/api/users"); // typed: Observable } createUser(user: User) { return this.http.post("/api/users", user); // body as 2nd arg } deleteUser(id: number) { return this.http.delete(`/api/users/${id}`); } } ``` ジェネリック (``) がレスポンスの型を指定します。リクエストは**遅延実行**されます — サブスクライブされたときのみ実行されます。 ## コンポーネント内での利用 ```ts ngOnInit() { this.userService.getUsers().subscribe(users => this.users = users); } // or with the async pipe (no manual subscribe/unsubscribe): users$ = this.userService.getUsers(); // template:

``` ## リクエストオプション: params、headers ```ts import { HttpParams, HttpHeaders } from "@angular/common/http"; this.http.get("/api/users", { params: new HttpParams().set("page", "1").set("limit", "10"), // ?page=1&limit=10 headers: new HttpHeaders({ Authorization: `Bearer ${token}` }), }); ``` ## RxJS によるエラーハンドリング ```ts import { catchError, retry } from "rxjs/operators"; import { of } from "rxjs"; this.http.get("/api/users").pipe( retry(2), // retry failed requests twice catchError(err => { console.error(err); return of([]); // fallback value, keep the stream alive }) ).subscribe(users => this.users = users); ``` Observable ベースであるため、オペレータを使用して再試行、フォールバック、タイムアウト、変換を組み合わせることができます。 ## インターセプタが横断的関心事を処理 ```text HTTP interceptors automatically attach auth tokens, log requests, handle errors globally, or show loading spinners — for ALL requests. ``` ## なぜ重要なのか `HttpClient` は Angular アプリがバックエンドと通信する方法です — 型付き、Observable ベース、再試行/フォールバック/変換のために RxJS と組み合わせ可能です。 Observable の性質 (fetch の Promise とは異なり) により、Angular の他の部分 (async パイプ、オペレータ、インターセプタ) と統合されます。型付きリクエスト、オプション、エラーハンドリング、および `async` パイプとのペアリングを理解することで、Angular のほぼすべてのデータ取得ニーズをカバーできます。