Setting up Interceptors for Http calls in Flutter App

As a Software Developer, the vast majority of the data we work with lives somewhere in an application. It’s important to highlight that this data is not always presented in the way we need. As developers we spend a great deal of time requesting, receiving, validating, and reshaping data; and in most cases, data that comes through HTTP calls from another application.

In this article, I want to share the importance of using an interceptor in HTTP calls and some ways of implementing it on a Flutter App. Let’s begin with some basic concepts.

What are HTTP calls

Let’s begin by defining what they are. HTTP requests work as the intermediary transportation between an application/client and a server. When submitting an HTTP request to the server, it internalizes the message and then sends back a response. This response includes status information regarding the request. HTTP calls help load the data from the server and keep the application up to date.

HTTP calls aren’t always simple and you can’t expect that only by using GET and POST you’ll get successful responses all the time. For instance, they need cookies, authorization tokens, secure headers, among other things. Also, it’s not a good practice for developers to write the same functions again and again in order to pass data within each request, and it's in these particular cases that the use of interceptors stands out.

What are Interceptors

A request interceptor is a piece of code that gets activated for every HTTP request received by an application. It’s a layer in between clients and servers that modifies the request and responses, therefore, by intercepting the HTTP request, we can change the value of the request.

Where and when to use Interceptors

Interceptors are good to use in any case where we want to avoid repeating code frequently used in our calls. A simple scenario would be when a user would like to log the HTTP calls, or modify them before reaching to and from the server.

This article will focus on 2 use cases in particular to explain and discuss Interceptors and how we can use them in an application:

1. Log interceptors
2. Custom interceptors

1. Log Interceptors

It’s important to assure the way our data is being passed and received while making an HTTP request is correct. For this, we use log, a printing statement in the console, to check the messages during development in an effective way.

It’s important to highlight that Flutter offers different packages for Log Interceptors, some of them are Dio and http. Both of them are extremely useful to make HTTP calls. In this article we are going to focus on implementing the Dio package.

To Import Dio package:

Add Dio as a network client package in the dependency section of your pubspec.yaml file and import it in the following way:

To import into the application, use this command in your project root:

or

Run the below command in your project root, it will add the latest version of Dio in the pubspec.yaml file:

Initialize the object and create logs:

As you create a Dio object, you can use the log interceptors to read while making HTTP calls.

This interceptor will help you create all the logs while making the HTTP request and response as well. You will be able to see all the information that you have requested.

2. Custom Interceptors

Now we will move to the next level and write custom interceptors. Let's think of an example, you are writing an application and you have multiple requests to handle. In this case, there might be a scenario where you want to pass the Token with a request and another one where you don’t need to pass it.

Example

In this scenario, you will have a base URL and multiple endpoints. Let’s say these are your API URLs:

We must split the base URL and endpoints in the following way:

In this example, we require the Token for the API and for the rest of the other endpoints we don’t need the token.

Let’s create a Dio object and create custom interceptors:

Creating an HTTP request and registration of the interceptors will look like this:

All in all

These little functions will intercept every single outgoing HTTP request or incoming response, and if the request response matches the parameters set by the interceptor, it will modify those payloads however the developer sees fit.

I hope this blog was useful! Let me know if you have been using HTTP calls and if you like the Flutter packages!

Happy Fluttering devs!