Axios interceptors in Vue - Performance & Optimization

Performance: Axios interceptors

MEDIUM IMPACT

Axios interceptors affect the network request lifecycle and can impact interaction responsiveness and perceived loading times.

Adding global request and response handlers in Axios

Vue

axios.interceptors.request.use(config => {
  // minimal synchronous logic
  config.headers['X-Custom-Header'] = 'value';
  return config;
});

axios.interceptors.response.use(async response => {
  // async processing without blocking UI
  await someAsyncFunction(response.data);
  return response;
});

Minimal synchronous work and async handling prevent blocking the main thread, keeping UI responsive.

📈 Performance GainNon-blocking interceptors improve interaction responsiveness (INP)

Adding global request and response handlers in Axios

Vue

axios.interceptors.request.use(config => {
  // heavy synchronous logic
  for (let i = 0; i < 1000000; i++) { /* slow loop */ }
  return config;
});

axios.interceptors.response.use(response => {
  // blocking UI with synchronous processing
  const start = Date.now();
  while(Date.now() - start < 50) {}
  return response;
});

Heavy synchronous code in interceptors blocks the main thread, delaying UI updates and slowing response handling.

📉 Performance CostBlocks rendering and input responsiveness for 50+ ms per request

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Heavy synchronous logic in interceptors	0	0	Blocks main thread causing delayed paint	[X] Bad
Light synchronous + async logic in interceptors	0	0	Non-blocking, smooth paint and interaction	[OK] Good

Rendering Pipeline

Axios interceptors run during the network request lifecycle before and after HTTP calls, affecting when data is available for rendering and user interaction.

→JavaScript Execution

→Network

→Interaction Handling

⚠️ BottleneckJavaScript Execution when interceptors run heavy synchronous code

Core Web Vital Affected

INP

Axios interceptors affect the network request lifecycle and can impact interaction responsiveness and perceived loading times.

Optimization Tips

1Avoid heavy synchronous code inside Axios interceptors to keep UI responsive.

2Use async processing in interceptors to prevent blocking the main thread.

3Keep interceptor logic minimal to reduce impact on interaction responsiveness (INP).

Performance Quiz - 3 Questions

What is the main performance risk of heavy synchronous code inside Axios interceptors?

A It causes layout shifts by changing DOM structure.

B It increases network latency by adding extra HTTP requests.

C It blocks the main thread, delaying UI updates and input responsiveness.

D It increases bundle size significantly.

DevTools: Performance

How to check: Record a performance profile while making requests with interceptors active. Look for long tasks during interceptor execution.

What to look for: Long tasks blocking main thread during request/response phases indicate heavy interceptor logic slowing interaction responsiveness.