Что такое AbortController и AbortSignal в JavaScript?

AbortController и AbortSignal

AbortController — это встроенный браузерный (и Node.js) API, который позволяет отменять асинхронные операции. Он был введён вместе с Fetch API и решает проблему отсутствия нативного механизма отмены промисов.

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

При создании AbortController он автоматически создаёт связанный объект AbortSignal, доступный через свойство .signal. Этот сигнал передаётся в операцию, которую нужно сделать отменяемой. Когда вызывается метод .abort() на контроллере, сигнал переходит в состояние aborted: true и генерирует событие abort.

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

console.log(signal.aborted); // false
controller.abort();
console.log(signal.aborted); // true

Использование с fetch

Наиболее распространённый сценарий — отмена HTTP-запросов:

const controller = new AbortController();

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

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

Важно различать AbortError и другие ошибки, чтобы не показывать пользователю ложные сообщения об ошибках.

Таймаут через AbortSignal.timeout()

С ES2022 появился удобный статический метод для создания сигнала с таймаутом:

// Автоматически отменит запрос через 5 секунд
fetch('/api/data', { signal: AbortSignal.timeout(5000) });

Использование в пользовательских асинхронных операциях

AbortController можно использовать не только с fetch — любая асинхронная операция может поддерживать отмену:

function delay(ms, signal) {
  return new Promise((resolve, reject) => {
    const timer = setTimeout(resolve, ms);

    signal?.addEventListener('abort', () => {
      clearTimeout(timer);
      reject(new DOMException('Операция отменена', 'AbortError'));
    });
  });
}

const controller = new AbortController();
delay(5000, controller.signal)
  .then(() => console.log('Готово'))
  .catch(err => console.log(err.message));

controller.abort(); // Отменяем немедленно

Объединение нескольких сигналов

В современных средах можно объединить несколько сигналов с помощью AbortSignal.any():

const userController = new AbortController();
const timeoutSignal = AbortSignal.timeout(10000);

// Отменится при первом сработавшем сигнале
const combinedSignal = AbortSignal.any([
  userController.signal,
  timeoutSignal
]);

fetch('/api/data', { signal: combinedSignal });

Практический паттерн в React

Очень часто AbortController используется в useEffect для отмены запросов при размонтировании компонента:

useEffect(() => {
  const controller = new AbortController();

  fetch('/api/user', { signal: controller.signal })
    .then(r => r.json())
    .then(setUser)
    .catch(err => {
      if (err.name !== 'AbortError') setError(err);
    });

  return () => controller.abort(); // Очистка при размонтировании
}, [userId]);