PassFront
  1. PassFront
  2. База знаний
  3. DOM и браузер

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

DOM и браузер

Запрос отменяют через `AbortController`: его `signal` передают в `fetch`/axios, а вызов `abort()` прерывает запрос.

Отмена fetch

const controller = new AbortController();

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

controller.abort(); // отменить

Применения

Отмена устаревших запросов (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]);

Таймаут

const signal = AbortSignal.timeout(5000); // отмена через 5с
fetch(url, { signal });

В axios

Тоже поддерживает signal:

axios.get(url, { signal: controller.signal });

Нюансы

  • Один контроллер может отменить несколько запросов (общий signal).
  • Отменённый запрос → промис падает с AbortError.

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

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

Другие вопросы раздела