Что использовал для запросов в приложении?

История и подход к выбору инструментов для HTTP-запросов

В моей практике как Frontend Developer с более чем 10 лет опыта, выбор инструментов для выполнения HTTP-запросов всегда зависел от контекста проекта: его масштаба, архитектуры, требований к производительности и экосистемы. Я прошел путь от классического XMLHttpRequest и jQuery через мощные библиотеки к современным нативным API и комплексным решениям.

Ключевые инструменты и их применение

1. Fetch API — современный стандарт для большинства случаев

Это нативный браузерный API, который я активно использую в современных проектах благодаря его чистой Promise-based архитектуре и отсутствию необходимости в дополнительных библиотеках.

// Пример комплексного использования Fetch с обработкой ошибок и таймаутами
async function fetchData(url, options = {}) {
  const controller = new AbortController();
  const timeoutId = setTimeout(() => controller.abort(), 10000);
  
  try {
    const response = await fetch(url, {
      ...options,
      signal: controller.signal
    });
    clearTimeout(timeoutId);
    
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    
    return await response.json();
  } catch (error) {
    if (error.name === 'AbortError') {
      console.error('Request timed out');
    } else {
      console.error('Fetch failed:', error);
    }
    throw error;
  }
}

Преимущества Fetch:

• Нативный и стандартизированный — не требует внешних зависимостей
• Поддержка Promise — идеально для async/await
• Более гибкий чем XMLHttpRequest, с контролем над запросами (AbortController)
• Интеграция с Streams API для обработки больших данных

Ограничения, которые приходится учитывать:

• Нет автоматического преобразования JSON в отличие от Axios
• Отсутствие встроенных таймаутов — приходится реализовывать самостоятельно
• Неполная обработка ошибок HTTP (response.ok нужно проверять явно)
• Нет автоматического отслеживания прогресса загрузки

2. Axios — для комплексных проектов с требованием к надежности

В крупных приложениях, особенно когда нужна единая конфигурация запросов, интерсепторы и автоматическая обработка ошибок, я выбираю Axios.

// Конфигурация Axios с интерсепторами для авторизации и обработки ошибок
const apiClient = axios.create({
  baseURL: process.env.API_BASE_URL,
  timeout: 10000,
  headers: { 'Content-Type': 'application/json' }
});

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

// Интерсептор для централизованной обработки ошибок
apiClient.interceptors.response.use(
  response => response.data,
  error => {
    if (error.response?.status === 401) {
      // Обработка отсутствия авторизации
      router.push('/login');
    }
    return Promise.reject(error);
  }
);

Сильные стороны Axios:

• Отличная обработка ошибок с детализацией по статусам HTTP
• Встроенные таймауты и возможности cancel запросов
• Интерсепторы для централизованной логики перед запросом и после ответа
• Автоматические преобразования данных (JSON, XML)
• Поддержка прогресса загрузки
• Кроссбраузерная совместимость и поддержка старых браузеров

3. GraphQL клиенты (Apollo Client, Relay) для API с GraphQL

Для проектов с GraphQL-backend я использую специализированные клиенты, которые предоставляют мощные возможности: кэширование, оптимизированные повторные запросы, интроспекцию схемы.

// Пример использования Apollo Client с React
import { useQuery, gql } from '@apollo/client';

const GET_USER_DATA = gql`
  query GetUserData($userId: ID!) {
    user(id: $userId) {
      id
      name
      email
      posts {
        title
        content
      }
    }
  }
`;

function UserProfile({ userId }) {
  const { loading, error, data } = useQuery(GET_USER_DATA, {
    variables: { userId },
    fetchPolicy: 'cache-and-network'
  });
  
  // Apollo автоматически управляет кэшированием и повторными рендерами
}

4. Специализированные решения для конкретных случаев

• SWR и React Query для React-приложений — эти библиотеки фокусируются на управлении состоянием данных, полученных через запросы, предоставляя кэширование, повторные запросы при фокусе, управление зависимыми запросами.
• Ручное использование WebSocket или Socket.io для real-time коммуникации — когда нужны постоянные двусторонние соединения.
• XMLHttpRequest в исторических проектах или для специфических случаев, как отслеживание прогресса загрузки файлов.

Архитектурные принципы и лучшие практики

Независимо от выбора конкретного инструмента, я всегда соблюдаю несколько ключевых принципов:

1. Централизация конфигурации запросов — все настройки (базовый URL, таймауты, заголовки) определяются в одном месте.
2. Интерсепторы/мидлвары для общей логики — обработка ошибок, добавление авторизации, логирование.
3. Изоляция слоя API от бизнес-логики — создание отдельных сервисов или модулей для коммуникации с backend.
4. Обработка всех возможных ошибок — сетевые проблемы, таймауты, HTTP ошибки, проблемы с данными.
5. Оптимизация повторных запросов и кэширование — чтобы минимизировать нагрузку на сеть и backend.
6. Тестирование слоя запросов — unit-тесты для API сервисов с использованием моков.

Выбор конкретного инструмента всегда определяется требованиями проекта. Для небольших современных приложений я предпочитаю Fetch API, для крупных корпоративных систем с комплексной логикой — Axios, для GraphQL-архитектур — специализированные клиенты, а для управления состоянием данных в React — React Query или SWR. Главное — не просто сделать запрос, а построить надежную, тестируемую и масштабируемую систему коммуникации с backend.