Skip to content

January 01, 2020

Axios: Interceptors

As a developer have you ever wanted to quickly manipulate a Axios request?

You might be using the basics of Axios like I was untill more complicated features was needed.

To intercept a request before it is sent:

axios.interceptors.request.use(request=> {
  // Do something with the data eg
  console.log(request) // request has lots of options as per usual request objects
  return r equest// interceptors need to return the request

It can be very useful for debugging each request and you can check for headers or other data you need. An example would be you forgetting to format a value for a header value. Like base64 encoding. It’s really simple to get a list of headers: req.headers

Of course you also have a response and this can also be intercepted:

axios.interceptors.response(response => {

For each request and response interceptors the second argument is an error function.

axios.interceptors.response.use(req => {
  // any status code within the 200 range will go here
  ... // if no error
},error => {
// any other HTTP codes will be sent to the error function
  if(error.status === 401) {
    ... // do something with the "Unauthorized Error"
    // or use your error handle function and pass it the error object'
} )

This is very useful, kind of like middleware. It could be used to check credentials or a JWT expiry.