Interceptors и их применение

В экосистеме Vue.js, особенно при работе с библиотекой Axios для HTTP-запросов, interceptors играют ключевую роль в управлении сетевыми взаимодействиями. Interceptors позволяют перехватывать запросы и ответы, модифицировать их, а также централизованно обрабатывать ошибки. Это значительно упрощает поддержку масштабных приложений, где необходимо единообразное поведение при обращении к API.

Перехват запросов

Interceptor запросов применяется перед отправкой данных на сервер. Основные возможности включают:

  • Добавление заголовков авторизации.
  • Логирование запросов.
  • Модификация тела запроса или параметров.

Пример использования:

import axios from 'axios';

const apiClient = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000,
});

apiClient.interceptors.request.use(
  config => {
    // Добавление токена авторизации
    const token = localStorage.getItem('authToken');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    console.log('Отправка запроса:', config);
    return config;
  },
  error => {
    // Обработка ошибок запроса
    return Promise.reject(error);
  }
);

Ключевой момент: внутри interceptors нельзя полностью прерывать цепочку запроса без возврата ошибки через Promise.reject, иначе последующие обработчики не выполнятся корректно.

Перехват ответов

Interceptor ответов позволяет централизованно обрабатывать успешные ответы и ошибки от сервера:

  • Обработка стандартных кодов ошибок (401, 403, 500).
  • Декодирование данных перед передачей компонентам.
  • Повторная отправка запроса при истечении токена.

Пример:

apiClient.interceptors.response.use(
  response => {
    // Можно модифицировать данные перед возвратом
    return response.data;
  },
  error => {
    if (error.response) {
      switch (error.response.status) {
        case 401:
          console.log('Необходима авторизация');
          // Логика редиректа на страницу логина
          break;
        case 500:
          console.log('Ошибка сервера');
          break;
        default:
          console.log('Произошла ошибка:', error.response.status);
      }
    }
    return Promise.reject(error);
  }
);

Здесь важный нюанс: обработчик ошибок interceptors вызывается только при наличии Promise.reject, что позволяет централизованно управлять поведением при сбоях.

Применение в Vue-компонентах

Interceptor можно использовать в любом компоненте, интегрированном с Axios. Обычно создается отдельный модуль для API-запросов:

// api.js
import apiClient from './axiosClient';

export function fetchUsers() {
  return apiClient.get('/users');
}

В компоненте:

<script>
import { fetchUsers } from '@/api/api';

export default {
  data() {
    return {
      users: [],
      error: null,
    };
  },
  async created() {
    try {
      this.users = await fetchUsers();
    } catch (err) {
      this.error = err.message;
    }
  }
};
</script>

Такой подход обеспечивает чистоту компонентов: логика обработки ошибок и добавления токенов вынесена в interceptors, а компоненты работают только с готовыми данными.

Глобальные и локальные interceptors

  • Глобальные: применяются ко всем запросам Axios, обычно настраиваются при создании экземпляра.
  • Локальные: применяются к отдельным запросам через конфигурацию:
axios.get('/data', {
  transformResponse: [data => {
    // Локальная модификация данных
    return JSON.parse(data);
  }]
});

Важно помнить, что порядок вызова interceptors имеет значение: сначала выполняются добавленные ранее interceptors запроса, затем — поздние, что позволяет строить многоуровневую цепочку обработки.

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

  1. Авторизация и обновление токенов Interceptor автоматически добавляет токен к каждому запросу и при получении ошибки 401 выполняет попытку обновления токена.

  2. Централизованная обработка ошибок Любые ошибки API можно перехватывать в одном месте, выводя унифицированные уведомления пользователю.

  3. Логирование и аналитика Отслеживание всех исходящих и входящих сетевых запросов для мониторинга производительности приложения.

  4. Форматирование данных Преобразование серверных данных в удобный формат для компонентов Vue без дублирования кода в каждом компоненте.

Использование interceptors позволяет создать гибкую, централизованную и поддерживаемую архитектуру взаимодействия с сервером. Их внедрение обеспечивает чистый код компонентов, повышает безопасность и упрощает обработку ошибок в масштабных Vue.js-приложениях.

Оглавление