Fetch API & Axios - Production Patterns

import axios, { type AxiosError, type InternalAxiosRequestConfig } from 'axios';

// lib/api.ts - create a configured Axios instance
const api = axios.create({
  baseURL: import.meta.env.VITE_API_URL ?? 'http://localhost:3001/api',
  timeout: 10_000, // 10 second timeout
  headers: {
    'Content-Type': 'application/json',
  },
});

// Request interceptor - attach auth token to every request
api.interceptors.request.use((config: InternalAxiosRequestConfig) => {
  const token = localStorage.getItem('access_token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

// Response interceptor - handle token refresh on 401
let isRefreshing = false;
let failedQueue: Array<{ resolve: (token: string) => void; reject: (error: unknown) => void }> = [];

api.interceptors.response.use(
  response => response,
  async (error: AxiosError) => {
    const originalRequest = error.config as InternalAxiosRequestConfig & { _retry?: boolean };

    if (error.response?.status === 401 && !originalRequest._retry) {
      if (isRefreshing) {
        // Queue other requests while token is being refreshed
        return new Promise((resolve, reject) => {
          failedQueue.push({ resolve, reject });
        }).then(token => {
          originalRequest.headers.Authorization = `Bearer ${token}`;
          return api(originalRequest);
        });
      }

      originalRequest._retry = true;
      isRefreshing = true;

      try {
        const { data } = await axios.post('/api/auth/refresh', {
          refreshToken: localStorage.getItem('refresh_token'),
        });
        localStorage.setItem('access_token', data.accessToken);
        failedQueue.forEach(({ resolve }) => resolve(data.accessToken));
        failedQueue = [];
        originalRequest.headers.Authorization = `Bearer ${data.accessToken}`;
        return api(originalRequest);
      } catch (refreshError) {
        failedQueue.forEach(({ reject }) => reject(refreshError));
        failedQueue = [];
        localStorage.clear();
        window.location.href = '/login';
        return Promise.reject(refreshError);
      } finally {
        isRefreshing = false;
      }
    }

    return Promise.reject(error);
  }
);

// Typed API functions
export const userApi = {
  getAll: () => api.get<User[]>('/users').then(r => r.data),
  getById: (id: string) => api.get<User>(`/users/${id}`).then(r => r.data),
  create: (data: CreateUserDto) => api.post<User>('/users', data).then(r => r.data),
  update: (id: string, data: UpdateUserDto) => api.patch<User>(`/users/${id}`, data).then(r => r.data),
  delete: (id: string) => api.delete(`/users/${id}`),
};

export default api;

// Fetch - AbortController (built-in)
async function searchUsers(query: string, signal: AbortSignal): Promise<User[]> {
  const response = await fetch(`/api/users?q=${encodeURIComponent(query)}`, { signal });
  if (!response.ok) throw new Error(`HTTP ${response.status}`);
  return response.json();
}

// In a component - cancel on every new query
useEffect(() => {
  const controller = new AbortController();
  searchUsers(query, controller.signal)
    .then(setResults)
    .catch(err => { if (err.name !== 'AbortError') setError(err.message); });
  return () => controller.abort(); // cancel previous request on next render
}, [query]);

// Axios - cancellation via AbortController (v1.x+)
useEffect(() => {
  const controller = new AbortController();
  api.get('/users', { signal: controller.signal })
     .then(r => setData(r.data))
     .catch(err => { if (!axios.isCancel(err)) setError(err.message); });
  return () => controller.abort();
}, []);