Тайм-ауты и отмена с AbortController
Добавляйте тайм-ауты в асинхронный код и отменяйте работу с помощью AbortController; передавайте сигналы задачам, чтобы останавливать их заранее
«Тайм-ауты и отмена с AbortController» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 2 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 3 уроков всего.
Зачем нужны ограничения времени ожидания и отмена?
Цель: безопасно останавливать длительные задачи.
- Добавление простого ограничения времени ожидания
- Использование AbortController
- Подключение сигнала к задаче
- Очистка таймеров
Задача, учитывающая сигнал
Создавайте задачи, которые слушают signal.abort и останавливают таймер при отмене.
// Fake fetch that respects AbortSignal
function fakeFetch(ms, value, signal) {
return new Promise(function (resolve, reject) {
// Abort handler
function onAbort() {
clearTimeout(t);
reject(new Error("aborted"));
}
// If already aborted
if (signal && signal.aborted) {
return reject(new Error("aborted"));
}
// Finish timer
const t = setTimeout(function () {
if (signal) {
signal.removeEventListener("abort", onAbort);
}
resolve(value);
}, ms);
// Listen for abort
if (signal) {
signal.addEventListener("abort", onAbort);
}
});
}
fakeFetch(5, "OK").then(function (v) {
console.log("fakeFetch:", v);
});
Отмена на практике
Создайте controller, передайте его сигнал и вызовите abort() для отмены.
// AbortController cancels signal-aware tasks
const controller = new AbortController();
fakeFetch(20, "Too slow", controller.signal)
.then(function (v) {
console.log("done:", v);
})
.catch(function (e) {
console.log("catch:", e.message);
});
// Abort after a short delay
setTimeout(function () {
controller.abort();
console.log("aborted");
}, 5);
Обёртка с ограничением времени ожидания
Используйте Promise.race, чтобы отклонить результат, если задача выполняется слишком долго; очищайте таймер в блоке завершающих действий.
// Add a timeout to any Promise with Promise.race
function withTimeout(promise, ms) {
return Promise.race([
promise,
new Promise(function (_resolve, reject) {
const t = setTimeout(function () {
reject(new Error("timeout"));
}, ms);
// Small trick: clear timer when the main promise settles
promise.finally(function () { clearTimeout(t); });
})
]);
}
// Demo: this will time out
withTimeout(fakeFetch(30, "late"), 10)
.then(function (v) { console.log("value:", v); })
.catch(function (e) { console.log("timeout:", e.message); });
Ограничение времени ожидания и отмена вместе
Если побеждает ограничение времени ожидания, вызовите abort(), чтобы базовая операция остановилась раньше.
// Combine: abort if timeout fires
async function fetchWithTimeout(msWork, msTimeout) {
const c = new AbortController();
const task = fakeFetch(msWork, "data", c.signal);
// If timeout wins, abort the task
try {
const result = await withTimeout(task, msTimeout);
return result;
} catch (e) {
c.abort();
throw e;
}
}
fetchWithTimeout(25, 10)
.then(function (v) { console.log("got:", v); })
.catch(function (e) { console.log("failed:", e.message); });
Советы и контрольный список
Советы:
- Всегда очищайте таймеры в блоке завершающих действий.
- Передавайте сигнал в задачи и проверяйте signal.aborted.
- Отдавайте предпочтение одному controller на запрос.
Тест по основам AbortController
Быстрая проверка: шаблон отмены.
Итоги
Итоги: Вы создали задачу, учитывающую сигнал, отменили её с помощью AbortController, добавили тайм-аут через Promise.race и объединили оба подхода для безопасного досрочного завершения.
Часто задаваемые вопросы
Урок «Тайм-ауты и отмена с AbortController» бесплатный?
Да — полный текст урока «Тайм-ауты и отмена с AbortController» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 3 уроков всего.
Чему я научусь в уроке «Тайм-ауты и отмена с AbortController»?
Добавляйте тайм-ауты в асинхронный код и отменяйте работу с помощью AbortController; передавайте сигналы задачам, чтобы останавливать их заранее Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать JavaScript Academy?
Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 3.
Сколько времени занимает урок «Тайм-ауты и отмена с AbortController»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке JavaScript Academy?
Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Написание асинхронных функций; try/catch; параллельное и последовательное выполнение
- Тайм-ауты и отмена с AbortController
- Повторные попытки и экспоненциальная задержка