What Are Axios Interceptors?

Axios Interceptors are functions that Axiostriggers for every request and response. You can use interceptors to transform the request before sending them, or manipulate the responses before passingthem to your functions. Axios interceptors are like the middleware in Expressjs.

Some Common Use Cases for UsingAxios Interceptors

Axios Request Interceptor - SomeCommon Use Cases

One of the most common scenarios where you would like to intercept and modify your axios requests is authentication. In most cases, you would want to add an authorization header to your axios requests. So, instead of adding this logic to your axios calls every time you make a new call, you would do this once on your request interceptor and be done with it.

Another common scenario would be to log every request you make. Instead of repeating this logging logic for each axios call you make, you define the logger logic in your request interceptor once, and you are done.

The 3rd common scenario would be the handling of the errors in the request itself.

Axios Response Interceptor - SomeCommon Use Cases

One common scenario you would want to use axios response interceptors is error handling. In my “Axios - Handling Errors and Using Retry Mechanisms” post, I talked about error handling in axios requests. There, I was using a try-catch block to handle different error cases for a single get request. Instead of building an error handling mechanism foreach of your requests separately, you can implement the error handling mechanism once, and it will be applied to all your requests. Easy and practical.

Another common scenario would be pre-processing the responses before passing them down to your calling functions. So, instead of repeating the parsing/pre-processing logic, you can write it once in your response interceptor.

Sample Axios Interceptor Implementations

Sample Axios Request Interceptor Implementation

In the sample request interceptor below, I am adding an authorization header to all the axios requests.

‍

Sample Axios Response Interceptor Implementation

Below, I am parsing a response by checking the value of a configuration value named “parse”. Set “parse” to true for the responses you want to parse, set it to false otherwise.

‍

How to Remove an Axios Interceptor

If you need to remove an interceptor at some point, you can do it as shown below.

Axios interceptors are a great tool in your toolbelt that you would almost always want to use in your projects if you have axios in place.  

In this post, I wanted to provide some brief and useful information about axios interceptors to get you up to speed, fast. Now you're ready to take on the challenge and optimize your codebase through utilization of axios interceptors.

Good Luck, Serdar.