Interceptors in Axios

Interceptors are functions that run before a request is sent and before your code gets the response, for jobs like adding headers, logging or reshaping data.

All Axios examples Axios: usage and stats

Interceptors in Axios: screenshot of the example below running — The code below, running in Chromium on our server (Oct 12, 2026). Press Run to see it live and change it.

How it works

Add a request interceptor. The request interceptor sets an Authorization header with config.headers.set, logs the method and URL, and returns the config. The offline adapter echoes the header back. [1]
Add a response interceptor. The response interceptor logs the status and adds a checkedBy field to response.data before returning the response. [1]
Eject an interceptor. use() returns an id. Passing it to eject removes the auth interceptor, so the second call arrives without the header. [1]
Check the order. A second instance registers two request and two response interceptors that only log a label. The output lists request 2 before request 1, and response 1 before response 2. [1]

Run and edit it

It runs in your browser, in a sandboxed frame that cannot see this site; the packages load from esm.sh only after you press Run.

import axios from 'axios';

// Offline adapter: echoes the Authorization header it received
const api = axios.create({
  adapter: async (config) => ({
    data: { auth: config.headers.get('Authorization') || '(none)' },
    status: 200,
    statusText: 'OK',
    headers: {},
    config,
  }),
});

// Request interceptor: runs before the request is sent
const authId = api.interceptors.request.use((config) => {
  config.headers.set('Authorization', 'Bearer demo-token');
  console.log('[request]', config.method.toUpperCase(), config.url);
  return config;
});

// Response interceptor: runs before the caller gets the response
api.interceptors.response.use((response) => {
  console.log('[response] status', response.status);
  response.data.checkedBy = 'response interceptor';
  return response;
});

const first = await api.get('/profile');
console.log('data:', JSON.stringify(first.data));

api.interceptors.request.eject(authId);
const second = await api.get('/profile');
console.log('after eject:', JSON.stringify(second.data));

// Execution order with several interceptors
const ordered = axios.create({
  adapter: async (config) => ({ data: null, status: 204, statusText: 'No Content', headers: {}, config }),
});
const tag = (label) => (value) => {
  console.log('  ' + label);
  return value;
};
ordered.interceptors.request.use(tag('request 1'));
ordered.interceptors.request.use(tag('request 2'));
ordered.interceptors.response.use(tag('response 1'));
ordered.interceptors.response.use(tag('response 2'));

console.log('order:');
await ordered.get('/ping');

Ctrl/⌘ + Enter runs

Read the console from the top: the interceptor logs, the data before and after eject, then the run order. Code written by AgentGid [1].

Checked Oct 12, 2026: it starts without errors in Chromium with axios 1.20.0. Needs WebGL.

More Axios examples

Custom adapters in Axios Creating an instance in Axios Error handling in Axios transformResponse in Axios

Sources

Docs: docs › interceptors

Explanations written by AgentGid from the official docs; the numbers in brackets point here. The code marked "written by AgentGid" is ours and free to copy.

Building something with Axios? Ask AgentGid →