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:

home.page.html

 

home.page.ts

 

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.

Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

6
Leave a Reply

avatar
4 Comment threads
2 Thread replies
2 Followers
 
Most reacted comment
Hottest comment thread
6 Comment authors
JulienJolly.exeSereneScreamCristmassimo Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Anon
Guest
Anon

Can you post the http.service.ts code?

massimo
Guest
massimo

No work for me :
overlay does not exist

Julien
Guest
Julien

Same for me.

Crist
Guest
Crist

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

SereneScream
Guest
SereneScream

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.