angular-http は何をしますか？
Angular v20+ において、resource()、httpResource()、HttpClient を使用して HTTP データフェッチを実装します。API 呼び出し、シグナルによるデータ読み込み、リクエスト/レスポンス処理、インターセプターに使用します。データフェッチ、API 統合、ローディング状態、エラーハンドリング、または Observable ベースの HTTP からシグナルベースのパターンへの変換をトリガーとします。
概要
このスキルは、Angular アプリケーションで HTTP データを取得するための最新のアプローチを提供します。Angular v20 で導入された resource() と httpResource() を活用し、コンポーネント内で宣言的かつリアクティブにデータを管理します。
主な機能
resource(): 汎用的な非同期データリソース管理httpResource():HttpClientと統合された特化型リソースHttpClient: 従来の HTTP クライアント（後方互換性のため）- シグナルベースのローディング状態管理
- エラーハンドリング
- インターセプターの設定
使用方法
httpResource() の基本的な使用
import { httpResource } from '@angular/common/http';
const todos = httpResource<Todo[]>('https://api.example.com/todos');
動的なリクエスト
const userId = signal(1);
const user = httpResource<User>(() => `https://api.example.com/users/${userId()}`);
エラーハンドリング
const data = httpResource<Data>('/api/data', {
mapError: (error: HttpErrorResponse) => {
console.error('API エラー:', error);
return { message: 'データの取得に失敗しました', status: error.status };
}
});
インターセプター
インターセプターは従来の HttpClient と同様に設定します：
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthInterceptor } from './auth.interceptor';
providers: [
{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
]
ベストプラクティス
- コンポーネント内で直接データフェッチを記述する:
resource()とhttpResource()はコンポーネント内で直接使用するよう設計されています。 - ローディング状態を明示的に扱う: シグナルを使用してローディング中、エラー、成功の各状態を管理します。
- 不要な再フェッチを避ける: 依存関係が変更された場合のみリクエストが再実行されるよう、適切にシグナルを設定します。
トリガーとなるシナリオ
- ユーザーがデータ一覧を表示する必要がある場合
- API エンドポイントからデータを取得する際
- ローディング状態やエラー状態を UI に反映する必要がある場合
- Observable ベースの既存コードをシグナルベースに移行する場合