Angular 2: Intercepting HTTP calls

You intercept an HTTP call when you want to make changes in the call before it can acutally leave your user’s browser and take your request to the server. There are several use cases when you want to do this for example in an Angular1.2 based application we wanted to append API path prefix “api” in all calls. We used standard AngularJs $httpProvider to configure the interceptor. There are multiple other scenarios in which you may want to intercept http calls, for example:

• Adding authentication token to every request
• Modifying headers of each call according to your backend’s needs
• Displaying a custom loading message on each request

You can either use already available libraries in your project to intercept calls, but if you don’t want to add another external dependency in your application, follow these simple steps to add one or more http interceptors in your application.

Step 1:

Write a class that extends HttpInterceptor interface from Angular common http library.

import { Injectable } from '@angular/core';
import {
  HttpEvent, HttpInterceptor, HttpHandler, HttpRequest
} from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable()
export class MyInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler):
    Observable<HttpEvent<any>> {
    // DO something here.
    return next.handle(req);
  }
}

Step 2:

Make your angular engine aware about your newly created interceptor. Import it in your module file and add it in your providers list like the following

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { MyInterceptor } from './my-interceptor';
...
providers: [
  { provide: HTTP_INTERCEPTORS, useClass: MyInterceptor, multi: true },
]
...

That’s all you have to do to intercept your calls in Angular2 application.

Order of Multiple interceptors

You can have multiple interceptors in your application and order in which you will add your interceptors in your module matters. So if you have three interceptors AuthInterceptor, PathInterceptor, LoadingInterceptor and you add them like following in your module file

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { MyInterceptor } from './my-interceptor';
...
providers: [
  { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
  { provide: HTTP_INTERCEPTORS, useClass: PathInterceptor, multi: true },
  { provide: HTTP_INTERCEPTORS, useClass: LoadingInterceptor, multi: true }
],
...

They all be called in the sequence in which you have provided them in the array i.e first of all AuthInterceptor then PathInterceptor and then LoadingInterceptor and you will get response in the reverse order.