Какую библиотеку использовал для асинхронных запросов?

Библиотеки для асинхронных запросов: эволюция и выбор

В моей практике я использовал несколько библиотек для асинхронных запросов, выбор которых всегда зависел от контекста проекта, его требований и экосистемы. Основные варианты включают fetch API, axios, и в некоторых случаях специализированные решения типа react-query или RTK Query.

Нативный Fetch API

Современный стандарт, который я активно использую в новых проектах:

// Базовый пример с обработкой ошибок и типами
async function fetchUserData(userId) {
  try {
    const response = await fetch(`https://api.example.com/users/${userId}`, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${token}`
      },
      // Дополнительные опции: кэширование, креденшиалы и т.д.
      cache: 'no-cache',
      credentials: 'include'
    });
    
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Fetch failed:', error);
    throw error;
  }
}

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

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

Axios для сложных проектов

В более крупных enterprise-проектах я часто выбирал axios:

import axios from 'axios';

// Создание экземпляра с конфигурацией
const apiClient = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000,
  headers: { 'X-Custom-Header': 'value' }
});

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

// Использование с TypeScript
interface User {
  id: number;
  name: string;
  email: string;
}

async function getUser(id: number): Promise<User> {
  const response = await apiClient.get<User>(`/users/${id}`);
  return response.data;
}

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

• Интерсепторы для глобальной обработки запросов/ответов
• Автоматическая трансформация JSON
• Отмена запросов через CancelToken (и AbortController в новых версиях)
• Защита от XSRF
• Более богатая экосистема плагинов и расширений

Специализированные решения

В React-проектах последних лет я также применял:

• React Query / TanStack Query для управления состоянием серверных данных
• RTK Query в связке с Redux Toolkit
• SWR от Vercel для кэширования и revalidation

// Пример с React Query
import { useQuery, useMutation } from '@tanstack/react-query';

function UserProfile({ userId }: { userId: string }) {
  const { data, isLoading, error } = useQuery({
    queryKey: ['user', userId],
    queryFn: () => fetchUserData(userId),
    staleTime: 5 * 60 * 1000, // 5 минут
    retry: 3
  });

  const updateUser = useMutation({
    mutationFn: (updatedData: UserData) => updateUserApi(userId, updatedData),
    onSuccess: () => {
      queryClient.invalidateQueries(['user', userId]);
    }
  });
}

Критерии выбора

Мой выбор всегда основан на:

1. Размер и сложность проекта — для простых SPA достаточно fetch, для enterprise часто нужен axios
2. Экосистема фреймворка — в Next.js удобен SWR, в Redux-проектах — RTK Query
3. Требования к кэшированию — специализированные библиотеки лучше справляются с инвалидацией кэша
4. Необходимость в обработке ошибок — axios предоставляет более удобные инструменты
5. Размер бандла — fetch не добавляет веса, axios ~13KB, react-query ~11KB

Тенденции и рекомендации

Современная тенденция — возврат к нативным API с их улучшением. Fetch API с каждым годом становится мощнее, получая поддержку:

• AbortController для отмены запросов
• Streams для обработки больших данных
• Advanced features в новых стандартах

Однако для проектов с высокой сложностью взаимодействия с API я все еще рекомендую axios или специализированные решения типа TanStack Query, которые предоставляют:

• Единую точку для управления состоянием серверных данных
• Оптимистичные обновления
• Фоновый refetch
• Дедупликацию запросов
• Пагинацию и бесконечные списки "из коробки"

Итог: нет универсального ответа — оптимальный выбор зависит от конкретных требований проекта, но понимание сильных сторон каждого инструмента позволяет принимать взвешенные архитектурные решения.