Setting up Axios Interceptors (React.js + TypeScript)

#react #typescript

Little tips for best programming practices.

Debugging is powerful to solve problems

When you are debugging your code on a web application, you have a lot of Developer Tools on the browser that help you to find the error and finally understand what is happening. (Although sometimes you prefer to ignore all that power and only use a console.log (“It works!”) … Yeah, I know you).

As a developer, I understand that the Developer Tools sometimes can be a little a little overwhelming for simple problems that don’t really need breakpoints on every line I wrote.

When I work with HTTP requests developing my apps, I always end do a console.log() to see what I’m receiving because put it a breakpoint sometimes it’s more tedious, which is great and its helpful under this circumstances. The problem came when I was debugging my code, I needed to write this line every time that I wanted to see the information, which it’s not great. I was wasting my time on this way.

So, what’s a better way?

I use Axios for do my HTTP requests. Axios have a way to add interceptors to an Axios Instance, which basically are a callback functions that will be executed before a request or after response occurs. A basic interceptor example [1] is:

The idea is add the log() (or the you want as debug(), info(), warn()) right here. This will be helpful to avoid putting these lines on every particular request or response we do.

Do the trick

In this example, I’m using React + TypeScript (and obviously, ES6), but It must be similar doing without this configuration and simple JavaScript.

Interceptors.ts
On this file I created the functions that I want in case a request, request error, response and response error. I exported a function to apply these callbacks to a given Axios instance for do it reusable.

Using the created function to apply the interceptors

Once the interceptors configuration are ready, we can use the setupInterceptorsTo() function. In this case, I’m setting up the interceptors to the global axios instance. So, every time I get the axios export default, the interceptors should work!

If you don’t want to set up the interceptors to the global instance, actually you can create an axios instance for a specific use on your app.

Also, you can add extra configuration to enable and disabled the logs. Like a flag or something like that if you don’t want to see the information on the console.

Resources.