Как можно отменить HTTP-запрос?

Отмена HTTP-запроса с помощью AbortController

В современном JavaScript для отмены HTTP-запросов используется API AbortController. Он позволяет связать сигнал отмены с запросом и прервать его в любой момент. Это особенно актуально при работе с динамическими интерфейсами, где пользователь может быстро переключаться между разделами, или при реализации поиска с автодополнением, чтобы избежать устаревших ответов.

Как это работает

AbortController создаёт объект сигнала (AbortSignal), который передаётся в опции fetch. Когда вызывается метод abort(), сигнал переходит в состояние "прервано", и fetch отклоняет промис с ошибкой типа AbortError. Важно обрабатывать эту ошибку, чтобы не допустить необработанных исключений.

Пример кода

const controller = new AbortController();
const signal = controller.signal;

fetch('https://api.example.com/data', { signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('Запрос был отменён');
    } else {
      console.error('Ошибка запроса:', err);
    }
  });

// Отмена запроса через 2 секунды
setTimeout(() => controller.abort(), 2000);

Применение на практике

• Отмена запросов при размонтировании компонента в React (в useEffect возвращать функцию очистки).
• Предотвращение гонок данных при быстром вводе текста в поиске.
• Отмена загрузки файлов или потоков данных.

Вывод: AbortController — стандартный и надёжный способ отмены HTTP-запросов в браузере и Node.js (начиная с версии 15). Используйте его везде, где требуется контроль над жизненным циклом запроса, особенно в асинхронных интерфейсах.