# AbortController: cómo cancelar un fetch en JavaScript

> AbortController entrega una señal que fetch puede escuchar. Esta guía muestra cuándo abortar por navegación, botón o demora y cómo interpretar el motivo.

- URL canónica: https://visteesto.com/nota/javascript-abortcontroller-cancelar-fetch
- Autor: [Martin Rodriguez](https://visteesto.com/autor/martin-rodriguez)
- Publicado: 2026-10-05T15:00:00.000Z
- Actualizado: 2026-10-05T15:00:00.000Z
- Sección: Tecnología
- Tema: javascript-fetch-cancelacion
- Idioma: es
- Consulta principal: cómo cancelar un fetch con AbortController en JavaScript

## Resumen verificable

- AbortController entrega una señal: al abortar, la llamada fetch pendiente se rechaza con el motivo y también puede interrumpirse la lectura de un cuerpo de respuesta. ([evidencia](https://fetch.spec.whatwg.org/#abort-fetch))
- Si abort() se llama sin una razón, AbortSignal guarda una excepción AbortError; con abort(reason), conserva el motivo indicado. ([evidencia](https://dom.spec.whatwg.org/#interface-abortcontroller))
- AbortSignal.timeout() activa la señal tras un período de tiempo activo y el rechazo de fetch por timeout usa TimeoutError. ([evidencia](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal/timeout_static))
- AbortSignal.any() combina señales y se activa por la primera que se cancele, cuyo motivo permite reconocer si fue un botón o un timeout. ([evidencia](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal))
- La documentación oficial vigente de Node.js 24 enumera AbortSignal.timeout() y AbortSignal.any() entre las señales disponibles en el entorno. ([evidencia](https://nodejs.org/download/release/latest-v24.x/docs/api/globals.html))

## Aporte editorial de VisteEsto

VisteEsto organiza las instrucciones del estándar en un recorrido de implementación: cancelación por navegación o botón, timeout, combinación de señales y manejo del motivo sin confundir errores.

## Qué cancela AbortController en una solicitud fetch

AbortController permite enviar una señal de cancelación a operaciones que la admiten, como fetch. Se crea un controlador, se pasa su propiedad signal en las opciones de la solicitud y se llama a abort() cuando esa operación deja de ser necesaria. La promesa pendiente se rechaza con el motivo de cancelación.

La interrupción también importa después de recibir los encabezados: si el cuerpo de la respuesta sigue leyéndose, abortar puede interrumpir esa lectura. Por eso, el try/catch debe abarcar tanto fetch(url, { signal }) como el await de response.json() o response.text(); cubrir sólo el primer await deja un tramo sin manejar.

## Cómo cancelar cuando el usuario cambia de pantalla

Cada solicitud debe tener su propio controlador. Si alguien escribe una nueva búsqueda, cambia de ficha o abandona una vista, la aplicación puede abortar el pedido anterior para que una respuesta que ya perdió vigencia no siga consumiendo trabajo en el cliente. Una señal usada y abortada no se reinicia: para la siguiente operación hay que crear otro AbortController.

El botón de cancelar llama al mismo método: controller.abort(). En el catch, revisá si controller.signal.aborted o el nombre del motivo antes de mostrar un error genérico. Así la interfaz puede tratar una cancelación esperada como tal, mientras reserva el mensaje de falla para otros problemas. Si se proporciona una razón propia a abort(reason), el código puede conservarla para explicar qué acción canceló la tarea.

## Cómo fijar un límite de tiempo y combinar señales

AbortSignal.timeout(5000) crea una señal que se activa al superar cinco segundos y usa un motivo TimeoutError. La duración se calcula como tiempo activo; puede pausarse, por ejemplo, si el documento queda en la caché de atrás/adelante. No es idéntico a medir cinco segundos de reloj en cualquier circunstancia.

Cuando sirven tanto un botón como un plazo, AbortSignal.any([controller.signal, AbortSignal.timeout(5000)]) produce una señal que se activa si se activa cualquiera de las dos originales. El motivo indica cuál llegó primero, lo que permite distinguir AbortError de TimeoutError. Si se necesita liberar un temporizador de inmediato al terminar antes del plazo, MDN recomienda un controlador con setTimeout y clearTimeout: timeout() no ofrece una operación para cancelar su temporizador.

## Guía de decisión: cancelar por botón, navegación o demora

Si una operación pertenece a una pantalla que puede cerrarse, vinculá su controlador al ciclo de vida de esa pantalla. Si la persona puede detenerla, conservá el controlador para su botón. Si el servicio tarda demasiado, fijá un límite adecuado al trabajo: una consulta rápida y una descarga grande no tienen por qué compartir el mismo plazo. Para cubrir dos causas, combiná las señales y conserva el motivo del rechazo.

Este mapa describe lo que fetch hace con su respuesta; no garantiza revertir acciones fuera del cliente. Node.js 24 también documenta AbortSignal.timeout() y AbortSignal.any().

## Fuentes consultadas

- Fuente primaria: [WHATWG Fetch Standard: abortar una llamada fetch](https://fetch.spec.whatwg.org/#abort-fetch)
- Fuente primaria: [WHATWG DOM Standard: AbortController y AbortSignal](https://dom.spec.whatwg.org/#interface-abortcontroller)
- Fuente secundaria: [MDN: AbortSignal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal)
- Fuente secundaria: [MDN: AbortSignal.timeout()](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal/timeout_static)
- Fuente primaria: [Node.js v24: globals AbortController y AbortSignal](https://nodejs.org/download/release/latest-v24.x/docs/api/globals.html)

## Imágenes y licencias

- Diagrama editorial de una señal AbortController que interrumpe una solicitud fetch y su lectura. Autor: VisteEsto. Licencia: [VisteEsto editorial](https://visteesto.com/terminos). [Origen](https://visteesto.com/nota/javascript-abortcontroller-cancelar-fetch).
- Secuencia propia de una solicitud fetch que se cancela al cambiar la búsqueda. Autor: VisteEsto. Licencia: [VisteEsto editorial](https://visteesto.com/terminos). [Origen](https://visteesto.com/nota/javascript-abortcontroller-cancelar-fetch).
- Comparación propia entre cancelación manual, timeout y combinación de señales. Autor: VisteEsto. Licencia: [VisteEsto editorial](https://visteesto.com/terminos). [Origen](https://visteesto.com/nota/javascript-abortcontroller-cancelar-fetch).

## Cómo citar

Citar título, autor, fecha de publicación o actualización y la URL canónica. Las afirmaciones centrales incluyen su evidencia directa arriba. Esta versión Markdown es una representación accesible; la nota HTML canónica es la fuente editorial de referencia.
