Functional Interceptors
Intercept requests with functional interceptors.
What is an interceptor
An HTTP interceptor sits between your app and the network. Every request and response passes through it, so you can add headers, log, transform, retry, or handle errors in one central place.
HttpInterceptorFn
Modern Angular uses functional interceptors: a HttpInterceptorFn receives the request and a next handler, and returns an observable of HTTP events.
import { HttpInterceptorFn } from '@angular/common/http';
export const loggingInterceptor: HttpInterceptorFn = (req, next) => {
console.log('request to', req.url);
return next(req);
};All lessons in this course
- Functional Interceptors
- Adding Auth Headers
- Handling Errors Globally
- Retry and Loading Indicators