Axios

🔍 What Is It?

Axios is a Promise-based HTTP client with a cleaner API than fetch:

const { data } = await axios.get<User[]>('/users');
// data is already parsed JSON, typed as User[]
// throws automatically on 4xx/5xx responses

Key advantages over fetch:

• →Throws on HTTP errors — no manual response.ok check needed
• →Auto JSON parsing — no response.json() call needed
• →Interceptors — middleware for requests and responses (auth, error handling, logging)
• →Request cancellation — CancelToken (or AbortController in Axios 1.x+)
• →Request/response transformation — transform data before sending or after receiving
• →Better TypeScript — generic types on all methods

🎯 Why Do We Need It?

In enterprise apps, every API call needs: auth headers, error parsing, request logging, token refresh on 401, and consistent error formatting. Implementing this with raw fetch requires wrapping every call. Axios interceptors let you implement this once for all calls.

🏗️ What Happens in Real Projects?

In every enterprise React app:

• →A configured Axios instance with base URL and default headers
• →A request interceptor that adds the auth token
• →A response interceptor that handles 401 (token refresh), 403 (redirect to forbidden page), and 500 (show error toast)
• →TypeScript-typed API functions that use the instance

⚙️ How It Works

Axios instance:

Create a configured instance with axios.create(). All calls through the instance use the shared configuration.

Interceptors:

• →Request interceptors run before every request (add auth header)
• →Response interceptors run after every response (handle errors, refresh tokens)

Error handling:

Axios throws an AxiosError on HTTP errors. Check error.response.status for the HTTP status code and error.response.data for the error body.

💻 Example

Enterprise Axios Setup — Configured instance with auth interceptors and typed API functions.

import axios, { AxiosError } from 'axios';

// Create a configured instance
export const apiClient = axios.create({
  baseURL: import.meta.env.VITE_API_URL,
  timeout: 30_000,
  headers: { 'Content-Type': 'application/json' },
});

// Request interceptor — add auth token to every request
apiClient.interceptors.request.use((config) => {
  const token = useAuthStore.getState().token; // Zustand store
  if (token) config.headers.Authorization = `Bearer ${token}`;
  return config;
});

// Response interceptor — handle common errors globally
apiClient.interceptors.response.use(
  (response) => response, // pass through successful responses
  async (error: AxiosError<ApiError>) => {
    const status = error.response?.status;

    if (status === 401) {
      // Try to refresh the token
      try {
        await refreshToken();
        // Retry the original request
        return apiClient.request(error.config!);
      } catch {
        useAuthStore.getState().logout();
        window.location.href = '/login';
      }
    }

    if (status === 403) {
      window.location.href = '/403';
    }

    if (status === 500) {
      useToastStore.getState().showToast('Server error. Please try again.', 'error');
    }

    return Promise.reject(error);
  }
);

🤔 Common Confusions

🚨 Common Production Issues

✅ Best Practices

🏛️ Architect's Note

💬 Frequently Asked Questions

🎯 Key Takeaways

🔗 Related Topics

🎯 Practice this topic in interviews

↗ Where this topic fits