Angular 5 HTTP Client Interceptors

Introduction: My blog explains how to interceptor work in angular. It acts as the layer before sending a request and after receiving a response. but Now, the question arises my mind What if we want to do the same in Angular? Let’s take an example of I adding the headers before sending a request or logging all the responses to the activities I do.

Suppose, when adding the headers before each call to the server or I am logging the data after every Response or more specifically, handling all the HTTP errors at one place. then one question arises my mind How I can achieve the same using Angular?

Then Interceptors is the answer for that. Now we talk about what is Angular Interceptors..... Angular Interceptors: Interceptors are the mechanism where we can operate on the outgoing request and the incoming response.Interceptors are the layer between our back-end services and Angular application. Whenever a request is made from the application, the interceptor catches the request, transforms it, and passes to the back end.

We can make changes to the response and use them in the application.whenever it receives the response, The same happens with the response;. Setting up Interceptors: To set up interceptor, we need a class which will be injectable class and implementing the HttpInterceptor. we have a method called intercept which has the body like below.

 

 intercept(request: HttpRequest, next: HttpHandler): Observable > {}
HeaderInterceptor:
    import {
        Injectable
    } from '@angular/core'
import {
    HttpInterceptor,
    HttpHandler,
    HttpRequest,
    HttpEvent,
    HttpResponse
} from '@angular/common/http';
import {
    Observable
} from 'rxjs/Observable';
import 'rxjs/add/operator/do';
@Injectable()
export class HeaderInterceptor implements HttpInterceptor {

    intercept(req: HttpRequest, next: HttpHandler): Observable > {
        const dummyrequest1 = req.clone({
            setHeaders: {
                'AuthKey': '12345',
                'DeviceID': '85645',
                'content-type': 'application/json'
            }
        }) console.log("Cloned Request");
        console.log(dummyrequest1);
        return next.handle(dummyrequest1);
    }
}

Above is the code for the header interceptor which will take the call and appends header auth key, device, and content-type and sends them further for  processing.

1. Whenever we need is the observable. We have imported the Injectable and the HttpResponse, HttpRequest, HttpHandler, HttpEvent,  HttpInterceptor from the common/http, another package.

2.We have declared the class HeaderInterceptor which implements the HttpInterceptor. While implementing, we get the method intercept which has HttpRequest and HttpHandler Object.

3. In this method, we have cloned the request object and used the setHeaders method where we have set the authkey, deviceid, and the content-type of the request which is application/json

4. Next, we are passing this object into the pipeline by using the handle method.