angular-http

@angular/common/http

バージョン: Angular 21（2025） タグ: HTTP、REST、API、インターセプター

リファレンス: HttpClient • API • インターセプター

API の変更

このセクションでは、最近のバージョン固有の API の変更について説明します。

• 新機能：関数型インターセプター — 最新のインターセプター設定には provideHttpClient(withInterceptors([...])) を使用します ソース

• 新機能：withFetch — HttpClient でネイティブの fetch API を使用します ソース

• 新機能：withInterceptorsFromDi — 関数型アプローチでレガシーインターセプターをサポートします

• 新機能：HttpContext トークン — HttpContextToken を使用したリクエストごとのメタデータ

• 新機能：AbortSignal のサポート — タイムアウトに対応したリクエストのキャンセル

• 非推奨：クラスベースの HttpInterceptor — 関数型インターセプターに移行してください

ベストプラクティス

• 関数型インターセプターを使用します

// ✅ Modern functional interceptor
export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const authService = inject(AuthService);
  const token = authService.getToken();
  
  if (token) {
    const authReq = req.clone({
      setHeaders: { Authorization: `Bearer ${token}` }
    });
    return next(authReq);
  }
  return next(req);
};

// Register
export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(withInterceptors([authInterceptor]))
  ]
};

• 横断的な関心事にはインターセプターを使用します — 認証、ログ記録、エラー処理

// Error interceptor with retry
export const errorInterceptor: HttpInterceptorFn = (req, next) => {
  return next(req).pipe(
    catchError((error: HttpErrorResponse) => {
      if (error.status === 401) {
        inject(Router).navigate(['/login']);
      }
      return throwError(() => error);
    })
  );
};

• 不安定なネットワークでは、バックオフを伴う再試行を使用します

import { retry, delay, catchError } from 'rxjs/operators';

http.get('/api/data').pipe(
  retry({ count: 3, delay: 1000 })
);

• リクエストごとのフラグには HttpContext を使用します

const cacheToken = new HttpContextToken<boolean>(() => false);

export const cacheInterceptor: HttpInterceptorFn = (req, next) => {
  if (req.context.get(cacheToken)) {
    // Check cache
  }
  return next(req);
};

// Usage
http.get('/api/data', {
  context: new HttpContext().set(cacheToken, true)
});

• HTTP レスポンスには適切な型を指定します

interface User {
  id: number;
  name: string;
}

http.get<User>('/api/user/1').subscribe(user => {
  console.log(user.name); // TypeScript knows the type
});

• HTTP レスポンス全体を取得するには observe: 'response' を使用します

http.get('/api/data', { observe: 'response' }).subscribe(response => {
  console.log(response.headers);
  console.log(response.body);
});

• エラーをグローバルに処理します

@Injectable()
export class GlobalErrorHandler implements ErrorHandler {
  handleError(error: Error) {
    // Log to error tracking service
    console.error(error);
  }
}

// Register
provideErrorHandler(GlobalErrorHandler)

• CORS リクエストには withCredentials を使用します

http.get('/api/data', { withCredentials: true });