Timeouts y cancelación con AbortController
Añada timeouts al código asíncrono y cancele operaciones con AbortController; conecte señales a las tareas para detenerlas antes.
Timeouts y cancelación con AbortController es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 2 de 3. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 3 lecciones en total.
¿Por qué utilizar timeouts y aborts?
Objetivo: Detener tareas largas de forma segura.
- Añadir un timeout sencillo
- Utilizar AbortController
- Conectar signal con la tarea
- Limpiar los temporizadores
Tarea que responde a signal
Cree tareas que escuchen a signal.abort y detengan el temporizador al cancelarse.
// 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);
});
Abortar en acción
Cree un controlador, pase su signal y llame a abort() para cancelar.
// 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);
Envoltorio de timeout
Utilice Promise.race para rechazar la operación si la tarea tarda demasiado; elimine el temporizador en finally.
// 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); });
Timeout y abortar conjuntamente
Si gana el timeout, llame a abort() para que el trabajo subyacente se detenga antes.
// 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); });
Consejos y lista de comprobación
Consejos:
- Limpie siempre los temporizadores en finally.
- Pase signal a las tareas y compruebe signal.aborted.
- Prefiera un controlador por solicitud.
Cuestionario sobre los conceptos básicos de AbortController
Comprobación rápida: patrón de cancelación.
Repaso
Repaso: Ha creado una tarea compatible con señales, la ha cancelado con AbortController, ha añadido un tiempo de espera mediante Promise.race y ha combinado ambas técnicas para realizar salidas tempranas seguras.
Preguntas frecuentes
¿La lección «Timeouts y cancelación con AbortController» es gratis?
Sí — el texto completo de «Timeouts y cancelación con AbortController» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 3 lecciones en total.
¿Qué aprenderé en «Timeouts y cancelación con AbortController»?
Añada timeouts al código asíncrono y cancele operaciones con AbortController; conecte señales a las tareas para detenerlas antes. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar JavaScript Academy?
No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 3.
¿Cuánto tiempo toma la lección «Timeouts y cancelación con AbortController»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?
Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Escritura de funciones async; try/catch; paralelo frente a secuencial
- Timeouts y cancelación con AbortController
- Patrones de reintento y backoff