Getting started with a practical http interceptor

When an Angular app starts talking to an API, the same little jobs pop up again and again. Add a token to every request. Catch errors in one place so you do not repeat code everywhere. Show a loading spinner while the app is waiting, then hide it when the response comes back.

An HTTP interceptor is like a checkpoint your requests pass through. It sits between your app and the server. That makes it a nice spot to do these shared tasks once, then let every service call benefit from it.

We will build one that does three real things. First it adds an auth header when a token exists. Then it handles common errors in a clear way, like 401 or 500, without crashing the whole screen. And finally it toggles a loading state so the UI can show “busy” without guessing.

A small ending note

After this, your API calls feel cleaner because each component can focus on its own job, not repeated request plumbing.