Как отменить запрос?
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). Один контроллер отменяет несколько запросов.