AngularでAPIリクエスト前後の処理を共通化する

環境 AngularでリクエストヘッダーにAuthorizationを共通して持たせたい とかレスポンスのStatusCodeを見て共通処理を書くと言ったAPIリクエスト前後の処理をどこで実装するのがいいのか調べてみた。 HttpInterceptor どうやらドンピシャっぽいのがこれで、ドキュメントによると > Intercepts and handles an HttpRequest or HttpResponse. つまり、リクエストとレスポンスそれぞれに処理をできますよということ。まさに探していた機能に間違いない。 使ってみる リクエストに対して処理をする これでリクエストヘッダーにBearer tokenというAuthorizationが付与されたうえでリクエストが投げられる。 レスポンスに対して処理をする これでレスポンスのstatusが400以上500未満の場合に限りconsoleが発火するようになった。これを使用すれば各statusに対する共通の処理を書くことができる。 app.module.ts にプロバイダー登録 それぞれ処理を書いたらapp.module.tsのprovidersに登録する。 これで無事に求めている動きをするようになった。