AbortController y AbortSignal son la forma estandarizada de cancelar trabajo asíncrono en JavaScript moderno. AbortController crea un controlador y AbortSignal es la señal que se pasa a las tareas para que puedan detenerse de inmediato cuando se llama a controller.abort.
Tl;dr Crear un controller y pasar controller.signal al trabajo asíncrono. Llamar a controller.abort(reason) para cancelar; los consumidores reciben un AbortError y pueden leer signal.reason si se proporcionó. Funciona con fetch, streams y con tus propias funciones. Ejemplo básico: const c = new AbortController() const resP = fetch con opciones { signal: c.signal } // luego c.abort(reason) try await resP catch e if e.name === AbortError ignore
Nucleo de la API y motivo de cancelación: const c = new AbortController() const signal = c.signal signal.aborted // boolean signal.reason // cualquier valor que explique por qué se abortó c.abort(new DOMException(Timeout, AbortError)) o c.abort(reasonVariable) Si pasas un motivo, procura propagarlo en tus propias tareas; fetch seguirá rechazando con AbortError pero tu código puede exponer signal.reason.
Timeouts con fetch A) más sencillo AbortSignal.timeout(ms) en navegadores modernos y Node 18+ ejemplo: fetch con opciones { signal: AbortSignal.timeout(3000) } B) temporizador manual const c = new AbortController() const id = setTimeout(() => c.abort(new DOMException(Timeout, AbortError)), 3000) try const res = await fetch con opciones { signal: c.signal } finally clearTimeout(id) C) utilidades de carrera crear varios controllers, lanzar fetch para cada uno, esperar al ganador con Promise.any y abortar los demás con controllers.forEach c => c.abort(lost)
Hacer tus propias funciones abortables ejemplo de espera abortable: export function wait(ms, signal) return new Promise((resolve, reject) => { const id = setTimeout(resolve, ms) const onAbort = () => { clearTimeout(id) reject(new DOMException(Aborted, AbortError)) } if (signal.aborted) return onAbort() signal.addEventListener(abort, onAbort, { once: true }) }) Para propagar el motivo usar reject(signal.reason ?? new DOMException(Aborted, AbortError))
Streams y lectores en navegador y Node: const c = new AbortController() const res = await fetch con opciones { signal: c.signal } const reader = res.body.getReader({ signal: c.signal }) // abort afecta a las lecturas también más tarde c.abort() En Node 18+ fetch también soporta abort; las operaciones de pipe y reader deben reaccionar al abort y cerrar recursos.
Patrones en React A) cancelar en unmount y al cambiar dependencias useEffect(() => { const c = new AbortController() ;(async () => { try const r = await fetch con opciones { signal: c.signal } setData(await r.json()) catch e if e.name !== AbortError console.error(e) })() return () => c.abort(component unmounted or deps changed) }, [q]) B) tipoahead mantener el último controller en ref y abortar antes de lanzar una nueva petición para que el valor más reciente gane
Utilidades pequeñas copiar y pegar: crear un controller que autoaborte con AbortSignal.timeout(ms). Combinar varias señales para que aborte si cualquiera lo hace con anySignal que devuelve un signal combinado y se aborte con el reason de la primera señal que falle.
Errores comunes y recomendaciones no olvidar pasar signal donde la tarea lo soporte, limpiar timers y listeners al abortar (usar once true), no silenciar todos los errores: solo ignorar AbortError y mostrar fallos reales, no reutilizar controllers globales entre operaciones si no quieres cancelaciones cruzadas, y si te importa el motivo usar abort(reason) y leer signal.reason en tu código.
Por qué importa esto para tus aplicaciones a medida y software a medida: usar AbortController mantiene las aplicaciones responsivas, evita condiciones de carrera y reduce fugas de memoria en peticiones largas, streams y procesos en background. En Q2BSTUDIO aplicamos estas buenas prácticas al desarrollar soluciones de software a medida y aplicaciones a medida, integrando manejo de cancelación en arquitecturas de frontend y backend para ofrecer experiencias robustas y eficientes.
Servicios relacionados y experiencia en Q2BSTUDIO: somos una empresa de desarrollo de software y aplicaciones a medida especializada en inteligencia artificial, ciberseguridad y servicios cloud. Si buscas integrar IA en tus productos o automatizar decisiones, conoce nuestras soluciones de inteligencia artificial para empresas. Para proyectos de software y aplicaciones multiplataforma visita nuestra página de software a medida y desarrollo de aplicaciones. Además ofrecemos servicios en cloud aws y azure, servicios de inteligencia de negocio, agentes IA, power bi y ciberseguridad para proteger tus activos.
Palabras clave integradas: aplicaciones a medida, software a medida, inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio, ia para empresas, agentes IA y power bi. Si quieres que tu proyecto use patrones correctos de cancelación y esté optimizado para rendimiento y seguridad, en Q2BSTUDIO podemos ayudarte a diseñar e implementar la solución adecuada.
Contacto y siguiente paso: solicita una consultoría técnica para evaluar cómo aplicar AbortController y otras prácticas de arquitectura en tu sistema y descubre cómo combinamos desarrollo a medida, IA y ciberseguridad para entregar productos fiables y escalables.
