Interceptors for request modification in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is an HTTP interceptor in Angular?

An HTTP interceptor is a service that can inspect and transform HTTP requests or responses before they are handled by the application. It acts like a middleman to modify requests or responses globally.

beginner

How do you register an HTTP interceptor in Angular?

You provide the interceptor class in the providers array with the token HTTP_INTERCEPTORS and set multi: true to allow multiple interceptors.

intermediate

What method must an Angular HTTP interceptor implement?

An Angular HTTP interceptor must implement the intercept(req: HttpRequest<any>, next: HttpHandler) method, which returns an Observable of the HTTP event stream.

intermediate

Why use interceptors to modify HTTP requests instead of modifying requests in each service?

Interceptors allow centralized request modification, reducing repeated code and ensuring consistent behavior like adding headers or logging across all HTTP calls.

beginner

Can Angular HTTP interceptors modify both requests and responses?

Yes, interceptors can modify outgoing requests before they are sent and also inspect or modify incoming responses before they reach the component.

Which Angular token is used to register HTTP interceptors?

A HTTP_CLIENT

B HTTP_INTERCEPTORS

C HTTP_HANDLER

D HTTP_SERVICE

HTTP_INTERCEPTORS is the Angular injection token used to register one or more HTTP interceptors.

What does the intercept method receive as parameters?

A HttpRequest and HttpHandler

B HttpResponse and HttpClient

C HttpEvent and HttpHeaders

D HttpClient and HttpInterceptor

The intercept method receives the HttpRequest to modify and the HttpHandler to forward the request.

How do you ensure multiple interceptors can be used together?

A Set multi: true when providing interceptors

B Use only one interceptor at a time

C Register interceptors in different modules

D Use different tokens for each interceptor

Setting multi: true allows Angular to keep multiple interceptors in an array and apply them all.

Which of these is a common use case for HTTP interceptors?

A Handling user input events

B Rendering UI components

C Adding authentication tokens to headers

D Styling HTML elements

Interceptors often add authentication tokens or custom headers to outgoing HTTP requests.

What type does the intercept method return?

A void

B Promise<HttpResponse>

C HttpRequest

D Observable<HttpEvent<any>>

The intercept method returns an Observable stream of HttpEvent objects.

Explain how to create and register an HTTP interceptor in Angular to add a custom header to all requests.

Think about modifying the request inside intercept and registering the interceptor in providers.

Describe why using HTTP interceptors is better than modifying HTTP requests individually in each service.

Consider the benefits of handling cross-cutting concerns in one place.