Intercepting Requests & Responses Using Axios
By: Sohel Ravankole
Tags: JavaScript, Axios, Interceptors, Frontend, Web Development

Intercepting Requests & Responses Using Axios

Banking on Clairvoyant’s experience working with Axios library and its many features, this blog documents Interceptor- one such feature in the library. Read further to know more about Interceptor and how we can set one up using Axios.

Axios is a modern and popular promise-based HTTP client that we can use to perform HTTP requests. It supports all modern browsers, including IE, and works in both browsers (JS clients) & Node.js platform.

Axios comes with a robust set of features:

Offers a wide range of browser support, including the old ones

Allows users to make XMLHttpRequests from browsers & HTTP requests from Node.js to interact with servers

Allows request and response interception

Allows users to set response timeout

Offers protection against XSRF at client side

Supports the Promise API

Allows request cancellation

Allows request and response data transformation

Offers automatic transformation for JSON data

Installation

# Using NPM

npm install --save axios # Using Yarn

yarn add axios

Usage

For more details on request config & response schema, visit the below links:

Request config - https://www.npmjs.com/package/axios#request-config

Response schema - https://www.npmjs.com/package/axios#response-schema

What Is An Interceptor?

In general, an interceptor is nothing but a function that gets called for every single HTTP request made and the response received by your application.

In the same way, the Axios interceptor is a function that gets called by Axios to update/transform each request before forwarding it & check/filter the response before returning it. In short, you can intercept the requests or responses before they are handled by then or catch.

Fig. Request and response interception using Axios

Setting up Axios interceptors

So far, we got to know Axios & its basic application. Now, it’s time to jump to the focal point of this article, i.e. request & response interception.

The steps to create Axios request & response interceptors are:

Create a new Axios instance with a custom config Create request, response & error handlers Configure/make use of request & response interceptors from Axios Export the newly created Axios instance to be used in different locations

The following code will use & explain the above steps:

Let’s use this newly created Axios instance in the example from the usage section.

Now, whenever we use this customAxios instance, it’ll intercept the requests, add the authorization header & pass the request to the server. And for the response, it’ll take it back from the server, and check for status 401. If it’s 401 then redirect the user to the login page, else forward/return the response.

If you don’t want to intercept the request & response, you can always make use of Axios instead of customAxios. Refer to the usage section for the same.

Conclusion

This is how we can make use of the Axios interceptor functions to intercept every request, update the request with authorization header, API key, etc. if it’s set up like that, and forward the request. Once the request is resolved, take the response, perform predefined checks/filters if any, and return/forward the response to complete the request made.