Explain Class-based HTTP Interceptors in Angular

30 / 100

Servicesintermediate

Class-based HTTP Interceptors

Explain the classic HttpInterceptor interface for intercepting and transforming outgoing requests and incoming responses.

The class-based HttpInterceptor interface was Angular's original mechanism for intercepting every HTTP request made through HttpClient — attaching auth tokens, logging, handling errors globally, retrying failed requests — without every individual service call needing to remember to do that work itself. Interviewers ask about this because it's a classic real-world cross-cutting concern, and it demonstrates whether you understand Angular's request pipeline as a chain of responsibility.

It's like airport security checkpoints in sequence — each checkpoint (interceptor) can inspect and even relabel your luggage (clone the request) before passing you to the next checkpoint, and on the way back, each checkpoint gets another look at what's coming through in reverse order.

Key Concepts

An interceptor implements a single intercept(req, next) method, receiving the outgoing HttpRequest and a next handler representing the rest of the interceptor chain. Because HttpRequest objects are immutable, an interceptor that wants to modify a request (like adding an Authorization header) must call req.clone({...}) to produce a new, modified request object rather than mutating the original — a detail interviewers frequently probe since it trips up newcomers who try to mutate req.headers directly.

intercept(req, next)HttpRequestnextAuthorizationreq.clone({...})

Multiple interceptors registered in the same app form a chain, and the order they're provided in the HTTP_INTERCEPTORS multi-provider token determines the order requests pass through them outbound, and the reverse order for responses flowing back — understanding this ordering matters when, say, a logging interceptor needs to see the final, fully-authenticated request rather than the raw one.

HTTP_INTERCEPTORS

A sharp interview answer also flags that class-based interceptors require registration via the HTTP_INTERCEPTORS multi-provider token with multi: true, and that this whole mechanism only works for requests made through Angular's HttpClient — it has no effect on fetch() calls or third-party HTTP libraries used directly.

HTTP_INTERCEPTORSmulti: trueHttpClientfetch()