Angular Academy · レッスン

関数型インターセプター

Q: 「関数型インターセプター」で何を学びますか？

関数型インターセプターでリクエストをインターセプトします ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

関数型インターセプターでリクエストをインターセプトします

「関数型インターセプター」はCoddyKit上の無料Angular Academyレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。

interceptorとは

HTTP interceptorは、アプリとネットワークの間に位置します。すべてのリクエストとレスポンスが通過するため、1か所でまとめてヘッダーの追加、ログ記録、変換、リトライ、エラー処理を行えます。

HttpInterceptorFn

現在のAngularではfunctional interceptorを使います。HttpInterceptorFnはリクエストとnextハンドラーを受け取り、HTTPイベントのobservableを返します。

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

export const loggingInterceptor: HttpInterceptorFn = (req, next) => {
  console.log('request to', req.url);
  return next(req);
};

withInterceptorsで登録する

アプリの設定でprovideHttpClient(withInterceptors([...]))を使ってinterceptorを提供します。

import { provideHttpClient, withInterceptors } from '@angular/common/http';

export const appConfig = {
  providers: [
    provideHttpClient(withInterceptors([loggingInterceptor]))
  ]
};

nextハンドラー

next(req)を呼び出して、リクエストをチェーンに渡します。返したものがリクエストのフローになります。nextを呼び出さなければ、リクエストは送信されません。

リクエストは不変です

HttpRequestは不変です。変更するには、変更内容を指定してclone()し、そのクローンをnextに渡す必要があります。

export const interceptor: HttpInterceptorFn = (req, next) => {
  const cloned = req.clone({ setHeaders: { 'X-App': 'demo' } });
  return next(cloned);
};

複数のinterceptorを連結する

interceptorは、リストに記載された順序で実行されます。それぞれが次のinterceptorを包むため、配列がパイプラインを形成します。先頭のinterceptorはリクエストを最初に確認し、レスポンスを最後に確認します。

withInterceptors([authInterceptor, loggingInterceptor, errorInterceptor])
// auth runs first on the way out

interceptor内でinject()を使う

functional interceptorはインジェクションコンテキストで実行されるため、サービスを直接inject()できます。

import { inject } from '@angular/core';

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = inject(AuthService).token();
  return next(req); // use token to modify req
};

レスポンスを調べる

返されたストリームにtapしてレスポンスを監視できます。たとえば、処理時間の計測やログ記録に使います。

import { tap } from 'rxjs';

export const timingInterceptor: HttpInterceptorFn = (req, next) => {
  const start = Date.now();
  return next(req).pipe(
    tap(() => console.log(req.url, Date.now() - start, 'ms'))
  );
};

条件付きinterception

リクエストのURLやメソッドに応じて分岐し、必要な場合だけロジックを適用できます。

export const apiOnly: HttpInterceptorFn = (req, next) => {
  if (!req.url.startsWith('/api')) return next(req);
  const cloned = req.clone({ setHeaders: { 'X-Api': '1' } });
  return next(cloned);
};

functional interceptorとclass interceptor

functional interceptorは、従来のclassベースのHttpInterceptorに代わるものです。よりシンプルで、tree-shakingに対応し、テストしやすく、DIトークンなしで登録できます。

DIベースのinterceptorとの相互運用

従来のclass interceptorを使う必要がある場合は、withInterceptorsFromDi()で連携できます。新しいコードではfunctional interceptorを優先してください。

provideHttpClient(
  withInterceptors([authInterceptor]),
  withInterceptorsFromDi()
)

クイックチェック

functional interceptorについての理解度を確認しましょう。

まとめ：Functional Interceptor

interceptorは、複数の箇所にまたがるHTTPロジックを一元化します。

HttpInterceptorFn： (req, next) => Observable。
withInterceptors([...])で登録します。
リクエストを変更するにはcloneし、処理を続けるにはnextを呼び出します。
サービスにはinject()を使います。

次は認証ヘッダーの追加です。

よくある質問

「関数型インターセプター」レッスンは無料ですか？

はい。「関数型インターセプター」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。

「関数型インターセプター」で何を学びますか？

関数型インターセプターでリクエストをインターセプトしますブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Angular Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/4です。

「関数型インターセプター」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このAngular Academyレッスンでコードを書いて実行できますか？

はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Angular Academyに戻る