AbortController: отмена устаревшего запроса

Назначение

AbortController позволяет передать сигнал отмены операциям, которые его поддерживают, включая fetch.

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

Вызов abort меняет состояние сигнала и может прервать ожидание запроса на клиенте. При новом поисковом вводе удобно отменить предыдущий запрос, чтобы не обрабатывать заведомо устаревший результат.

Пример

const controller = new AbortController();
async function load() {
  try {
    const response = await fetch('/api/demo', { signal: controller.signal });
    if (!response.ok) throw new Error('HTTP ' + response.status);
    return await response.json();
  } catch (error) {
    if (controller.signal.aborted) return null;
    throw error;
  }
}
// В своём проекте: load(); затем controller.abort();

Что должно получиться

Функция определена, но запрос автоматически не запускается. После отмены обработчик возвращает null, а остальные ошибки сохраняет для вызывающего кода. Путь /api/demo нужно реализовать отдельно.

Граница применения и частая ошибка

Отмена клиента не откатывает уже выполненное действие сервера. Для запросов, меняющих данные, нужны собственные гарантии обработки; abort нельзя считать транзакционным rollback.

Самостоятельная проверка

В отдельном проекте используйте учебный медленный GET-обработчик и отмените запрос. Проверьте состояние загрузки и не показывайте обычную ошибку сети для намеренной отмены.

Связанные материалы

• Статусы HTTP
• Панель Network
• Структура проекта