Axios Interceptor Builder

An Axios interceptor is a function that runs before every request or after every response. Request interceptors let you modify config (add auth headers, log requests). Response interceptors let you handle errors globally, refresh tokens, transform data, or retry failed requests — without repeating the logic in every API call.

When a 401 response arrives, the response interceptor catches it, calls the refresh token endpoint to get a new access token, stores it, then retries the original failed request with the new token. To prevent multiple simultaneous refreshes, you queue pending requests while the refresh is in-flight, then replay them all after success.

Request interceptors run before the request leaves the browser — perfect for injecting auth tokens, adding correlation IDs, or logging outbound requests. Response interceptors run after the response arrives — perfect for global error handling, token refresh, response transformation, or retry logic.

axios.interceptors.request.use() and .response.use() return an interceptor ID. Store it and call axios.interceptors.request.eject(id) to remove it. This is important in React to clean up interceptors on component unmount to avoid memory leaks or duplicate interceptors.

Exponential backoff increases the wait time between retries geometrically: attempt 1 waits 1s, attempt 2 waits 2s, attempt 3 waits 4s. Adding random jitter (±20%) prevents thundering herd — when many clients retry simultaneously, random delays spread the load. Only retry idempotent requests (GET, PUT) and specific status codes (429, 503).

Use axios.isAxiosError(error) to type-narrow. This gives you access to error.response (server response), error.request (request that was made), and error.config (request config). Create a typed API error class to wrap these for consistent error handling: catch (err) { if (axios.isAxiosError(err)) { const status = err.response?.status; ... } }