Что такое Axios Interceptor?

Axios Interceptor: Концепция и практическое применение

Axios Interceptor — это мощный механизм в библиотеке Axios для перехвата (intercepting) HTTP-запросов или ответов до их обработки then или catch. Это позволяет централизованно модифицировать конфигурацию запросов, обрабатывать ошибки, добавлять аутентификационные токены, логировать данные и многое другое. Interceptors работают как middleware-цепочка, через которую проходят все запросы и ответы.

Как работают перехватчики?

Axios предоставляет два типа перехватчиков:

• Request Interceptors — перехватывают исходящие запросы
• Response Interceptors — перехватывают входящие ответы

Каждый тип использует метод use(), который принимает два колбэка: для успешного выполнения и для обработки ошибок.

Практические примеры использования

1. Добавление аутентификационных заголовков

import axios from 'axios';

// Request Interceptor для добавления токена
axios.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 ошибки
axios.interceptors.response.use(
  (response) => {
    return response;
  },
  (error) => {
    if (error.response?.status === 401) {
      // Перенаправление на страницу логина
      window.location.href = '/login';
    }
    return Promise.reject(error);
  }
);

2. Централизованная обработка ошибок

// Response Interceptor для унифицированной обработки ошибок
axios.interceptors.response.use(
  (response) => response,
  (error) => {
    const { response } = error;
    
    if (!response) {
      // Нет ответа от сервера
      return Promise.reject({
        message: 'Network error. Please check your connection.',
        code: 'NETWORK_ERROR'
      });
    }
    
    const errorMessage = response.data?.message || 'An error occurred';
    const status = response.status;
    
    // Логирование ошибок
    console.error(`HTTP ${status}: ${errorMessage}`);
    
    // Можно интегрировать с системой мониторинга
    // Sentry.captureException(error);
    
    return Promise.reject({
      message: errorMessage,
      status,
      data: response.data
    });
  }
);

3. Работа с несколькими экземплярами Axios

// Создаем отдельный экземпляр для API с перехватчиками
const apiClient = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000
});

// Перехватчик для добавления API-ключа
apiClient.interceptors.request.use((config) => {
  config.params = {
    ...config.params,
    api_key: process.env.VUE_APP_API_KEY
  };
  return config;
});

// Перехватчик для обработки загрузки
let activeRequests = 0;

apiClient.interceptors.request.use((config) => {
  activeRequests++;
  document.body.classList.add('loading');
  return config;
});

apiClient.interceptors.response.use(
  (response) => {
    activeRequests--;
    if (activeRequests === 0) {
      document.body.classList.remove('loading');
    }
    return response;
  },
  (error) => {
    activeRequests--;
    if (activeRequests === 0) {
      document.body.classList.remove('loading');
    }
    return Promise.reject(error);
  }
);

Ключевые особенности и лучшие практики

Особенности работы:

• Перехватчики выполняются в порядке их регистрации
• Можно регистрировать несколько перехватчиков каждого типа
• Request interceptors получают объект конфигурации запроса
• Response interceptors получают объект ответа или ошибки
• Можно удалить перехватчик с помощью eject() метода

// Пример удаления перехватчика
const requestInterceptor = axios.interceptors.request.use(config => config);
axios.interceptors.request.eject(requestInterceptor);

Лучшие практики использования:

• Модульность — выносите перехватчики в отдельные файлы для удобства поддержки
• Обработка ошибок — всегда реализуйте обработку ошибок в перехватчиках
• Отмена запросов — используйте CancelToken или AbortController в комбинации с перехватчиками
• Тестирование — тестируйте перехватчики изолированно от бизнес-логики
• Безопасность — не храните чувствительные данные в перехватчиках

Реальные сценарии применения

1. Авто-обновление токенов — при получении 401 ошибки, автоматический refresh токена и повтор запроса
2. Кэширование запросов — перехватчик может проверять кэш перед отправкой запроса
3. Логирование — детальное логирование всех запросов/ответов для отладки
4. Троттлинг/дебаунсинг — контроль частоты запросов к API
5. Преобразование данных — автоматическое преобразование форматов данных (например, camelCase ↔ snake_case)
6. Индикация загрузки — глобальный индикатор загрузки для всех запросов

Ограничения и предостережения

Важно помнить:

• Перехватчики применяются глобально ко всем запросам через данный экземпляр Axios
• Неудачная обработка в перехватчике может сломать все запросы приложения
• Циклические зависимости в перехватчиках могут привести к бесконечным циклам
• Слишком сложная логика в перехватчиках усложняет отладку

Axios Interceptors — это элегантное решение для централизованного управления HTTP-коммуникацией, которое значительно упрощает поддержку кода, обеспечивает единообразие обработки запросов и позволяет реализовывать сложные сценарии взаимодействия с API без дублирования кода.