С помощью чего отменяется fetch запрос в JavaScript?

Fetch-запрос отменяют через `AbortController`: его сигнал передают в `fetch`, а вызов `abort()` прерывает запрос.

Как отменить

const controller = new AbortController();

fetch('/api/data', { signal: controller.signal })
  .then((res) => res.json())
  .catch((err) => {
    if (err.name === 'AbortError') {
      console.log('запрос отменён');
    }
  });

controller.abort(); // отменить запрос

• AbortController создаёт signal, который передаётся в fetch.
• controller.abort() прерывает запрос — промис отклоняется с AbortError.

Практические применения

Отмена устаревших запросов (race conditions)

При быстрой смене (поиск с вводом) отменять предыдущий запрос:

let controller;
function search(query) {
  controller?.abort();               // отменить прошлый
  controller = new AbortController();
  fetch(`/search?q=${query}`, { signal: controller.signal });
}

Очистка в React

useEffect(() => {
  const controller = new AbortController();
  fetch(url, { signal: controller.signal });
  return () => controller.abort(); // отмена при размонтировании
}, [url]);

Таймаут

AbortSignal.timeout(5000); // сигнал, срабатывающий через 5с

Нюансы

• Один контроллер может отменить несколько запросов (общий signal).
• AbortController работает и с другими API (axios поддерживает signal).

Коротко для собеседования

Fetch отменяют через AbortController: передают controller.signal в fetch, вызывают controller.abort() — промис падает с AbortError. Применяют для отмены устаревших запросов (поиск), очистки в useEffect при размонтировании и таймаутов (AbortSignal.timeout).