Cancelación de solicitudes con AbortController
Cancele limpiamente las solicitudes en curso.
Cancelación de solicitudes con AbortController es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 4 de 4. 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 4 lecciones en total.
Por qué cancelar una solicitud
A veces inicia una solicitud que ya no necesita: el usuario cambia de pantalla, escribe una búsqueda nueva o transcurre un tiempo de espera. AbortController permite cancelar un fetch en curso.
Creación de un controlador
Cree un AbortController. Este expone un signal que se pasa a fetch y un método abort() para cancelar la solicitud.
const controller = new AbortController();
console.log(controller.signal); // an AbortSignalPasar la señal
Proporcione la señal del controlador a fetch mediante el objeto de opciones. Ahora puede cancelar la solicitud.
fetch(url, { signal: controller.signal });Llamada a abort
Llame a controller.abort() para cancelar. La Promise pendiente de fetch se rechaza con un AbortError.
const controller = new AbortController();
fetch(url, { signal: controller.signal });
controller.abort(); // cancels the requestCaptura de AbortError
Diferencie una cancelación intencionada de un fallo real comprobando err.name === "AbortError" en el bloque catch.
try {
await fetch(url, { signal: controller.signal });
} catch (err) {
if (err.name === "AbortError") console.log("Cancelled");
else throw err;
}Patrón de tiempo de espera
Combine esta técnica con setTimeout para abortar automáticamente las solicitudes lentas. Borre el temporizador si la solicitud termina antes.
const c = new AbortController();
const t = setTimeout(() => c.abort(), 5000);
await fetch(url, { signal: c.signal });
clearTimeout(t);Auxiliar de tiempo de espera integrado
Los entornos modernos ofrecen AbortSignal.timeout(ms), que devuelve una señal que se aborta automáticamente. Es más sencillo que configurar setTimeout manualmente.
fetch(url, { signal: AbortSignal.timeout(5000) });Cancelación de la búsqueda anterior
En una búsqueda predictiva, aborte la solicitud anterior antes de iniciar una nueva. Así evitará que las respuestas obsoletas sobrescriban los resultados actuales.
let current = null;
function search(q) {
if (current) current.abort();
current = new AbortController();
return fetch("/search?q=" + q, { signal: current.signal });
}Una señal para varias solicitudes fetch
Una sola señal puede abortar varias solicitudes a la vez. Pase la misma señal a varios fetch y una llamada a abort() los cancelará todos.
const c = new AbortController();
fetch(a, { signal: c.signal });
fetch(b, { signal: c.signal });
c.abort(); // cancels bothSeñales ya abortadas
Si una señal ya está abortada cuando se pasa a fetch, la solicitud se rechaza inmediatamente. Compruebe signal.aborted si necesita conocer su estado.
if (controller.signal.aborted) console.log("already cancelled");Limpieza al desmontar
En las interfaces basadas en componentes, aborte las solicitudes pendientes cuando se destruya el componente para evitar establecer el estado de algo que ya no existe.
const controller = new AbortController();
// on teardown:
controller.abort();Comprobación rápida
Cancelación de solicitudes fetch.
Resumen
Cree un AbortController, pase su signal a fetch y llame a abort() para cancelar. La Promise se rechaza con un AbortError, que puede detectar por su nombre. Utilícelo para tiempos de espera (AbortSignal.timeout), para cancelar búsquedas anteriores, para cancelar varias solicitudes y para limpiar recursos al desmontar.
Preguntas frecuentes
¿La lección «Cancelación de solicitudes con AbortController» es gratis?
Sí — el texto completo de «Cancelación de solicitudes 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 4 lecciones en total.
¿Qué aprenderé en «Cancelación de solicitudes con AbortController»?
Cancele limpiamente las solicitudes en curso. 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 4 de 4.
¿Cuánto tiempo toma la lección «Cancelación de solicitudes 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
- Realización de solicitudes GET
- POST y envío de datos
- Gestión de errores y códigos de estado
- Cancelación de solicitudes con AbortController