AbortController: cómo cancelar un fetch en JavaScript

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.

También puede servirte: Web Workers en JavaScript: qué son y cuándo convienen

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.

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.

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.

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().