This is a short example of how to catch all [Axios][1] HTTP requests, responses, and errors. Catching is implemented with the Axios feature called [interceptors][2]. 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][3]

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

<a href="https://codepen.io/teroauralinna/pen/vPvKWe" class="embedly-card" data-card-width="100%" data-card-controls="0">Embedded content: https://codepen.io/teroauralinna/pen/vPvKWe</a>

## Installing Axios

Start by [installing Axios][5] by the instructions.

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

```javascript
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.

```javascript
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.

```javascript
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.

```javascript
const requestHandler = (request) => {
  if (isHandlerEnabled(request)) {
    // Modify request here
    request.headers['X-CodePen'] = 'https://codepen.io/teroauralinna/full/vPvKWe'
  }
  return request
}
```

### Enable request interceptor

```javascript
axiosInstance.interceptors.request.use(
  request => requestHandler(request)
)
```

## Axios response and error interceptors

### Add response handlers

```javascript
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

```javascript
axiosInstance.interceptors.response.use(
  response => successHandler(response),
  error => errorHandler(error)
)
```

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


[1]: https://github.com/axios/axios
[2]: https://github.com/axios/axios#interceptors
[3]: https://codepen.io/teroauralinna/pen/vPvKWe
[4]: http://alexkvazos.github.io/VanillaToasts/
[5]: https://github.com/axios/axios#installing
[6]: https://github.com/axios/axios#creating-an-instance

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.

Blog posts related to HTTP

Global HTTP request and response handling with the Axios interceptor