Отмена запросов с AbortController
Корректно отменяйте выполняющиеся запросы.
«Отмена запросов с AbortController» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.
Зачем отменять запрос
Иногда вы запускаете запрос, который больше не нужен: пользователь переходит на другую страницу, вводит новый поисковый запрос или истекает время ожидания. AbortController позволяет отменить выполняющийся fetch.
Создание controller
Создайте AbortController. Он предоставляет signal, который передаётся в fetch, и метод abort() для отмены.
const controller = new AbortController();
console.log(controller.signal); // an AbortSignalПередача сигнала
Передайте сигнал controller в fetch через объект параметров. Теперь запрос можно отменить.
fetch(url, { signal: controller.signal });Вызов abort
Вызовите controller.abort(), чтобы отменить запрос. Ожидающий Promise fetch будет отклонён с ошибкой AbortError.
const controller = new AbortController();
fetch(url, { signal: controller.signal });
controller.abort(); // cancels the requestПерехват AbortError
Отличите намеренную отмену от настоящего сбоя, проверив err.name === "AbortError" в блоке catch.
try {
await fetch(url, { signal: controller.signal });
} catch (err) {
if (err.name === "AbortError") console.log("Cancelled");
else throw err;
}Шаблон с тайм-аутом
Объедините этот подход с setTimeout, чтобы автоматически отменять медленные запросы. Если запрос завершился первым, очистите таймер.
const c = new AbortController();
const t = setTimeout(() => c.abort(), 5000);
await fetch(url, { signal: c.signal });
clearTimeout(t);Встроенная функция тайм-аута
Современные среды предоставляют AbortSignal.timeout(ms), возвращающий сигнал, который автоматически отменяет запрос. Это проще, чем самостоятельно настраивать setTimeout.
fetch(url, { signal: AbortSignal.timeout(5000) });Отмена предыдущего поиска
При поиске по мере ввода отменяйте предыдущий запрос перед запуском нового. Это не позволяет устаревшим ответам перезаписывать свежие результаты.
let current = null;
function search(q) {
if (current) current.abort();
current = new AbortController();
return fetch("/search?q=" + q, { signal: current.signal });
}Один сигнал для нескольких fetch
Один сигнал может одновременно отменить несколько запросов. Передайте один и тот же сигнал нескольким вызовам fetch, и один вызов abort() отменит их все.
const c = new AbortController();
fetch(a, { signal: c.signal });
fetch(b, { signal: c.signal });
c.abort(); // cancels bothУже отменённые сигналы
Если сигнал уже отменён в момент передачи в fetch, запрос будет немедленно отклонён. При необходимости проверить его состояние используйте signal.aborted.
if (controller.signal.aborted) console.log("already cancelled");Очистка при удалении компонента
В интерфейсах на основе компонентов отменяйте незавершённые запросы при уничтожении компонента, чтобы не пытаться изменить состояние того, чего больше не существует.
const controller = new AbortController();
// on teardown:
controller.abort();Быстрая проверка
Отмена запросов fetch.
Повторение
Создайте AbortController, передайте его signal в fetch и вызовите abort() для отмены. Promise будет отклонён с ошибкой AbortError, которую можно определить по имени. Используйте этот механизм для тайм-аутов (AbortSignal.timeout), отмены предыдущего поиска, отмены нескольких запросов и очистки при завершении работы.
Часто задаваемые вопросы
Урок «Отмена запросов с AbortController» бесплатный?
Да — полный текст урока «Отмена запросов с AbortController» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.
Чему я научусь в уроке «Отмена запросов с AbortController»?
Корректно отменяйте выполняющиеся запросы. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать JavaScript Academy?
Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Отмена запросов с AbortController»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке JavaScript Academy?
Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Выполнение GET-запросов
- POST и отправка данных
- Обработка ошибок и кодов состояния
- Отмена запросов с AbortController