⛔️ Как отменить fetch-запрос
Если пользователь изменил поисковый запрос, покинул страницу или закрыл компонент, предыдущий запрос может стать ненужным.
Отменить его можно через AbortController.
Создаём контроллер:
const controller = new AbortController();
Передаём его сигнал в fetch:
fetch(url, {
signal: controller.signal
});
Когда запрос больше не нужен — отменяем:
controller.abort();
При отмене fetch завершится с ошибкой AbortError, которую можно обработать отдельно:
try {
await fetch(url, {
signal: controller.signal
});
} catch (error) {
if (error.name !== 'AbortError') {
throw error;
}
}
Особенно полезно для поиска, фильтров, переходов между страницами и размонтирования компонентов.
#javascript #frontend #fetch
Если пользователь изменил поисковый запрос, покинул страницу или закрыл компонент, предыдущий запрос может стать ненужным.
Отменить его можно через AbortController.
Создаём контроллер:
const controller = new AbortController();
Передаём его сигнал в fetch:
fetch(url, {
signal: controller.signal
});
Когда запрос больше не нужен — отменяем:
controller.abort();
При отмене fetch завершится с ошибкой AbortError, которую можно обработать отдельно:
try {
await fetch(url, {
signal: controller.signal
});
} catch (error) {
if (error.name !== 'AbortError') {
throw error;
}
}
Особенно полезно для поиска, фильтров, переходов между страницами и размонтирования компонентов.
#javascript #frontend #fetch