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

Что такое Instance (Экземпляр) в Axios

В библиотеке Axios — популярном HTTP-клиенте для JavaScript — Instance (экземпляр) представляет собой специально настроенный объект Axios с предопределёнными конфигурациями, который можно создавать и использовать многократно. Это одна из ключевых возможностей библиотеки, позволяющая организовать код эффективно и избежать дублирования.

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

По умолчанию, когда мы импортируем Axios, мы получаем глобальный экземпляр с базовыми настройками:

import axios from 'axios';

axios.get('https://api.example.com/data'); // Используется глобальный экземпляр

Однако, если в приложении несколько API-сервисов с разными базовыми URL, заголовками, таймаутами или интерсепторами, постоянно передавать эти параметры в каждый вызов становится неудобно. Здесь на помощь приходит создание собственных экземпляров через axios.create():

// Создание кастомного экземпляра для работы с определённым API
const apiInstance = axios.create({
  baseURL: 'https://api.myapp.com/v1',
  timeout:常5000,
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer YOUR_TOKEN'
  }
});

Ключевые преимущества использования Instance

• Изоляция конфигураций: Каждый экземпляр живёт в своей "песочнице". Изменение конфигурации одного экземпляра (например, добавление интерсептора) не затрагивает другие экземпляры или глобальный объект Axios.
• Удобство повторного использования: Создав экземпляр один раз, его можно импортировать и использовать в любом модуле приложения, обеспечивая согласованность всех запросов к конкретному сервису.
• Чистота кода: Избавляет от необходимости постоянно передавать одни и те же параметры (baseURL, заголовки аутентификации). Код становится более читаемым и декларативным.
• Гибкость: Можно создать неограниченное количество экземпляров для разных целей: основной API, сторонний сервис, резервный эндпоинт и т.д.

Практическое применение и пример

Представим типичное SPA (Single Page Application) с Vue.js или React, где есть модуль для работы с API.

1. Создание экземпляра (файл api/axiosInstance.js):

import axios from 'axios';

// Экземпляр для основного API
export const mainApi = axios.create({
  baseURL: process.env.VUE_APP_API_BASE_URL, // или process.env.REACT_APP_API_BASE_URL
  timeout: 10000,
});

// Экземпляр для внешнего сервиса (например, для загрузки файлов)
export const fileServiceApi = axios.create({
  baseURL: 'https://fileservice.example.com/upload',
  headers: { 'X-Service-Key': 'FILE_SERVICE_KEY' },
});

2. Добавление интерсепторов для основного экземпляра:

Интерсепторы — мощный механизм Axios для перехвата запросов или ответов. Их логично привязывать к конкретному экземпляру.

// Request Interceptor: добавляет токен аутентификации к каждому запросу
mainApi.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('authToken');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// Response Interceptor: глобально обрабатывает ошибки (например, 401 Unauthorized)
mainApi.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response?.status === 401) {
      // Логика перенаправления на страницу логина
      console.warn('Сессия истекла!');
      window.location.href = '/login';
    }
    return Promise.reject(error);
  }
);

3. Использование в компоненте или сервисе:

import { mainApi } from '@/api/axiosInstance';

// Все запросы через этот экземпляр автоматически получают baseURL, таймаут и заголовок Authorization
async function fetchUserData(userId) {
  try {
    const response = await mainApi.get(`/users/${userId}`); // URL будет: https://api.myapp.com/v1/users/123
    return response.data;
  } catch (error) {
    console.error('Ошибка загрузки данных:', error);
    throw error;
  }
}

Важное отличие от глобального Axios

Важно понимать, что методы axios.create(), axios.interceptors, axios.defaults работают независимо для каждого экземпляра. Например:

const instanceA = axios.create({ baseURL: 'https://api-a.com' });
const instanceB = axios.create({ baseURL: 'https://api-b.com' });

// Добавляем интерсептор ТОЛЬКО для instanceA
instanceA.interceptors.request.use(() => console.log('Запрос к API-A'));

instanceA.get('/test'); // В консоль выведется: "Запрос к API-A"
instanceB.get('/test'); // Ничего не выведется, интерсептор не сработает
axios.get('https://api-c.com/test'); // Глобальный Axios также не затронут

Заключение

Instance (экземпляр) в Axios — это фундаментальный паттерн для структурирования HTTP-коммуникаций в современных фронтенд-приложениях. Он способствует соблюдению принципов DRY (Don't Repeat Yourself) и SoC (Separation of Concerns), позволяя разработчикам централизованно управлять конфигурацией, аутентификацией, обработкой ошибок и другими сквозными задачами для различных API-REST-endpoints. Использование кастомных экземпляров вместо глобального объекта — признак зрелой и хорошо организованной кодобазы.