Что такое Axios Instance?

# Что такое Axios Instance?

Axios Instance — это объект, созданный через axios.create(), который содержит предварительно настроенные параметры для выполнения HTTP запросов. Это один из ключевых паттернов при работе с HTTP клиентами в современных приложениях.

Основная концепция

Вместо того чтобы использовать глобальный axios и каждый раз передавать одни и те же параметры (baseURL, headers, timeout), создаём отдельный instance с нужной конфигурацией:

const axiosInstance = axios.create({
  baseURL: "https://api.example.com",
  timeout: 10000,
  headers: {
    "Content-Type": "application/json",
  },
});

// Теперь используем его
axiosInstance.get("/users");
axiosInstance.post("/users", { name: "John" });

Главное применение — интерцепторы

Main power Axios Instance в том, что интерцепторы работают только для конкретного instance:

// Интерцептор для добавления токена
axiosInstance.interceptors.request.use((config) => {
  const token = localStorage.getItem("authToken");
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

// Интерцептор для обработки ошибок
axiosInstance.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response?.status === 401) {
      // Редирект на логин
      window.location.href = "/login";
    }
    return Promise.reject(error);
  }
);

Практический пример структуры проекта

// src/api/axiosInstance.ts
export const apiClient = axios.create({
  baseURL: process.env.REACT_APP_API_URL,
  timeout: 15000,
});

apiClient.interceptors.request.use((config) => {
  const auth = JSON.parse(localStorage.getItem("auth") || "{}");
  if (auth.token) {
    config.headers.Authorization = `Bearer ${auth.token}`;
  }
  return config;
});

apiClient.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response?.status === 401) {
      // Refresh token logic
    }
    return Promise.reject(error);
  }
);

export default apiClient;

// src/api/users.ts
import apiClient from "./axiosInstance";

export const getUsersAPI = () => apiClient.get("/users");
export const updateUserAPI = (id, data) => apiClient.put(`/users/${id}`, data);

Преимущества использования Instance

1. DRY принцип — конфигурация в одном месте
2. Масштабируемость — легко добавлять новые endpoints
3. Тестируемость — можно мокировать один instance в тестах
4. Разделение ответственности — API клиент отдельно от компонентов
5. Управление состоянием — интерцепторы обрабатывают общую логику (auth, errors)

Отличие от глобального axios

// ❌ Плохо — глобальный axios
axios.get("/users", {
  headers: { Authorization: `Bearer ${token}` },
});

// ✅ Хорошо — instance с интерцепторами
apiClient.get("/users"); // token добавляется автоматически

Axios Instance — это фундамент для правильной организации HTTP клиента в React приложениях, обеспечивающий чистоту кода и упрощающий управление API запросами.