AbortControllerAbortController — это встроенный JavaScript API, который позволяет тебе отменять асинхронные операции такие как fetch-запросы или event listeners. Он работает через объект signal, который можно передать в операции, чтобы связать их с контроллером.
Чтобы его использовать, создай экземпляр контроллера, передай его signal в вызов fetch, а затем вызови abort() когда нужна отмена:
const controller = new AbortController();
fetch(url, { signal: controller.signal })
.then(response => response.json())
.catch(err => {
if (err.name === 'AbortError') {
console.log('Request was cancelled');
}
});
controller.abort(); // cancels the fetch
signal можно передать в несколько fetch-вызовов и отменить их все одним вызовом abort()AbortError — всегда обрабатывай эту ошибку, чтобы не получить необработанное исключениеaddEventListener(type, handler, { signal })Распространённый случай в реальных приложениях — отмена текущего запроса при запуске нового, например в поле поиска:
let controller;
function search(query) {
controller?.abort(); // cancel previous request
controller = new AbortController();
fetch(`/search?q=${query}`, { signal: controller.signal });
}
Использование AbortController предотвращает лишние сетевые запросы, позволяет избежать обработки устаревших ответов и улучшает общую производительность приложения — особенно в сценариях с быстрыми действиями пользователя или размонтированием компонентов в таких фреймворках как React.
Один экземпляр AbortController можно использовать для отмены нескольких одновременных fetch запросов, передавая один и тот же signal в каждый вызов fetch.
Новый — ещё не проверен сообществом
Вы