4 ways to use Axios interceptors

Axios interceptors let you hook into every HTTP request and response your app makes — in one place, once. Instead of repeating the same header, log line, or error-handling code at every call site, you register an interceptor and it runs everywhere. This post walks through four practical uses: injecting auth headers, logging traffic, standardizing error handling, and rate-limiting requests.

What is Axios?

Axios is a promise-based HTTP client for the browser and node.js. It comes with many useful defaults like automatically detecting JSON responses and returning an object instead of plain text, throwing an error if the response status code is greater than 400.

What is an axios interceptor?

An Axios interceptor is a function that the library calls every time it sends or receives the request. You can intercept requests or responses before they are handled by “then” or “catch”.

Example:

// Add a request interceptor
axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });

// Add a response interceptor
axios.interceptors.response.use(function (response) {
    // Any status code that lie within the range of 2xx cause this function to trigger
    // Do something with response data
    return response;
  }, function (error) {
    // Any status codes that falls outside the range of 2xx cause this function to trigger
    // Do something with response error
    return Promise.reject(error);
  });

You can also remove the interceptor from Axios.

const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

1. Inject an auth token header in every request

There is a big chance when building an app that you will use an API that requires some credentials like an api_token or a user auth token. Usually, you will have to append the required headers with every HTTP request you make. Using Axios interceptors, you can set this up once, and anywhere you call your Axios instance, you are sure that the token is there.

axios.interceptors.request.use(req => {
  // `req` is the Axios request config, so you can modify
  // the `headers`.
  req.headers.authorization = 'Bearer mytoken';
  return req;
});

// Automatically sets the authorization header because
// of the request interceptor
const res = await axios.get('https://api.example.com');

2. Log every request and response

Logging requests can be beneficial, especially when you have a large app and you don’t know where all your requests are triggered. Using an Axios interceptor, you can log every request and response quickly.

const axios = require('axios');

axios.interceptors.request.use(req => {
  console.log(`${JSON.stringify(req, null, 2)}`);
  // you must return the request object after you are done
  return req;
});

axios.interceptors.response.use(res => {
  console.log(res.data);
  // you must return the response object after you are done
  return res;
});

await axios.post('https://example.com/');

3. Standardize error handling

You can use an Axios interceptor to capture all errors and enhance them before they reach your end user. If you use multiple APIs with different error object shapes, you can use an interceptor to transform them into a standard structure.

const axios = require('axios');

axios.interceptors.response.use(
  res => res,
  err => {
    throw new Error(err.response?.data?.message ?? err.message);
  }
);

const err = await axios.get('http://example.com/notfound').catch(err => err);
// "Could not find page /notfound"
err.message;

4. Rate-limit your requests

Backend resources are limited and can cost a lot of money. As a client, you help reduce the load on your server by rate-limiting your HTTP calls. Here’s how you can do it with a request interceptor that spaces every call out by a fixed interval.

const axios = require('axios');

let lastRequest = 0;
const MIN_INTERVAL = 2000; // at most one request every 2 seconds

axios.interceptors.request.use(config => {
  const now = Date.now();
  const wait = Math.max(0, lastRequest + MIN_INTERVAL - now);
  lastRequest = now + wait;
  return new Promise(resolve => setTimeout(() => resolve(config), wait));
});

Because the interceptor returns a promise, Axios waits for it to resolve before firing the request — so each call is delayed just enough to stay under your limit.

Wrapping up

Interceptors turn cross-cutting HTTP concerns — auth, logging, error shape, rate limiting — into one small piece of setup instead of boilerplate scattered across your codebase. That “intercept the behavior in one place” idea shows up all over JavaScript; if you like this pattern, you’ll enjoy building developer-friendly APIs with ES6 Proxies, which intercepts object access the same way. Register the interceptors you need once, and every request and response flows through them for free.