DEV Community

Tero Auralinna
Tero Auralinna

Posted on • Originally published at on

Axios Interceptors Global HTTP request and response handling with the Axios interceptor

This is a short example of how to catch all Axios HTTP requests, responses, and errors. Catching is implemented with the Axios feature called interceptors. It's possible to catch all requests before they are sent and modify them. Also, responses and errors can be caught globally. For example, interceptors are useful when you want to modify request headers before a request is sent or you are implementing some kind of global error handling system.

Of course, for real use case, it might be too general to handle all requests and responses in the same way. That’s why we will also have a configuration option for each HTTP requests to disable global handling.

The demo is available at CodePen

In the demo, I have used VanillaToasts library to show a notification when a HTTP request is done.

Installing Axios

Start by installing Axios by the instructions.

Create a new instance and add any global config options you might need to use.

const axiosInstance = axios.create({
  baseURL: 'https://...'

Making HTTP request handler configurable

Add isHandlerEnabled function which will check if the global handler should be used or not. Here it's also possible to implement additional custom logic. For example, enabling the handler only for the certain HTTP response codes.

const isHandlerEnabled = (config={}) => {
  return config.hasOwnProperty('handlerEnabled') && !config.handlerEnabled ? 
    false : true

Now we are later able to disable handler for an individual HTTP call if we want to.

await axiosInstance.get('/v2/api-endpoint', { handlerEnabled: false })

Axios request interceptor

Add request handler

One common use case for a request handler is to modify or add new HTTP headers. For example, an authentication token could be injected into all requests.

const requestHandler = (request) => {
  if (isHandlerEnabled(request)) {
    // Modify request here
    request.headers['X-CodePen'] = ''
  return request

Enable request interceptor

  request => requestHandler(request)

Axios response and error interceptors

Add response handlers

const errorHandler = (error) => {
  if (isHandlerEnabled(error.config)) {
    // Handle errors
  return Promise.reject({ ...error })

const successHandler = (response) => {
  if (isHandlerEnabled(response.config)) {
    // Handle responses
  return response

Enable interceptors

  response => successHandler(response),
  error => errorHandler(error)

And now every request made by Axios uses the handlers we have defined.

This blog post was originally published on

Top comments (6)

kumaravnish profile image

This doesn't seem to work with axios 0.19.x. Any idea how to pass the handleError flag in the latest version of axios?

phatnh96 profile image
Nguyễn Huy Phát

The article is quite helpful, thank you

cajuuh profile image
Pedro Alcântara

Thank you very much, i knew the concept never knew how to apply it

mteheran profile image
Miguel Teheran

Great! thanks

isajal07 profile image
Sajal Shrestha

Hi Tero, How can I include data(body) while doing a post API request in Axios Interceptor?

mikepattyn profile image
Mike Pattyn

This fails when using typescript because the AxiosRequestConfig does not has the handlerEnabled property.