Ionic 4 | Make HTTP Calls and Handle Responses Easily Using an Interceptor

Applications with dynamic data call from REST API to get updated, these calls are mainly of POST or GET type. In Ionic 4 using Angular 7, we use HttpClientModule to make these POST or GET requests.

After Angular 4.3 the concept of Interceptors was introduced, using which we can override the HTTP calls to handle their requests and responses.

We can use Interceptors for many purposes like Handling Error responses, Internet connectivity intimations, show progress loaders, Add/ change header types of HTTP calls, secure server connectivity using token-based authentications and many more.

In this post, we will learn How to make HTTP calls and handle their responses and request at one place using an Angular Interceptor.

We will create a new Ionic 4 App using Angular latest stable version 7 using the latest Ionic CLI(v4.12.0)

Before we start make sure you have latest Ionic CLI installed

Create new Ionic 4 App

Run following NPM command in CMD to create a new Ionic 4 application with a blank template.

Add HttpClientModule in App’s Module

To use HTTP services, we need to import HttpClientModule, then add in imports array in the app.module.ts file as shown below.

Create an HTTP Interceptor

Now we will create an HTTP Interceptor to globally intercept and modify calls. Create a new file httpConfig.interceptor.ts and replace below code in it.

Interceptors implements HttpInterceptor service to override the intercept method taking two parameters HttpRequest and HttpHandler.

As we can’t directly change headers of the request so we make a clone of request.

To use this interceptor globally we need to import this in the app.module.ts file and also add in providers array as shown below.


Show Ionic Loader Spinner on HTTP request

Using Interceptors we can easily show/ hide Ionic Spinner loader at one place. We will import LoadingController and use it show/hide in the interceptor callbacks. You can check more details on loaders here

Create a service HttpService

After adding the Interceptor, we will create a new service which will method to make an HTTP call to test our Interceptor response handling.

Create new service HttpService and replace the below code:

Finally, in Home component replace following class and template code:


So now we have an Interceptor in Ionic 4 application which is helping in modifying get requests by changing headers and also setting token in Authentication key. We are also handling errors in Interceptors which can be logged for debugging purposes.

Leave a Reply

5 Comment threads
2 Thread replies
Most reacted comment
Hottest comment thread
7 Comment authors
Owen LeneganJulienJolly.exeSereneScreamCrist Recent comment authors
newest oldest most voted
Notify of

Can you post the http.service.ts code?


No work for me :
overlay does not exist


Same for me.


Sorry but something is missing in this tutorial, some part is not visible.
Please have a look,


Appreciate the rundown on how to set this up. I’m running into an issue with an API I’m accessing though. With some requests it’s expecting a Cookie header. Testing in Postman this Cookie header is added in Postman’s temporary headers automatically. I’ve tried to add it manually mimicking how the the Authorization token is added is added in this example bit that just results in an error in the console “Refused to add unsafe header Cookie”. Any suggestions would be appreciated.

Owen Lenegan
Owen Lenegan

Hey bro, thanks so much for this, really neat way to implement API calls which require awkward Header info and some Heroku CORS injection in the testing phase. I’m a complete noob so if I can follow this and get it to work then you are clearly doing it right. Cheers buddy, appreciate your time and code *salute*