AbortController: Cancelar Peticiones Fetch

Introducción a AbortController

AbortController es una API moderna de JavaScript que te permite cancelar operaciones asíncronas, incluyendo peticiones fetch. Antes de su introducción, no había forma nativa de cancelar una petición fetch una vez iniciada, lo que podía causar problemas de rendimiento cuando el usuario navegaba a otra página o cuando una petición tomaba demasiado tiempo.

La API funciona con dos componentes principales: AbortController yAbortSignal. El controlador crea una señal que se pasa a la petición fetch, y cuando llamas al método abort() del controlador, la petición se cancela y se lanza un error AbortError.

• <strong>AbortController</strong>: Objeto que controla la cancelación de operaciones
• <strong>AbortSignal</strong>: Señal que se pasa a fetch para permitir su cancelación
• <strong>abort()</strong>: Método que cancela todas las operaciones asociadas a la señal
• <strong>AbortError</strong>: Error lanzado cuando una operación es cancelada

AbortController Básico

Para usar AbortController, primero creas una instancia del controlador, extraes la señal y la pasas a fetch. Luego, puedes llamar al método abort()en cualquier momento para cancelar la petición. La petición se cancelará inmediatamente y se lanzará un error que debes capturar.

En este ejemplo, creamos un AbortController y pasamos su señal a fetch. Cuando el usuario hace clic en el botón de cancelar, llamamos a controller.abort(), lo que cancela la petición inmediatamente. El error se captura en el bloque catch, donde verificamos si es un AbortError para manejarlo apropiadamente.

Timeout con AbortSignal

Un caso de uso muy común es implementar un timeout automático para las peticiones. Si la petición no se completa dentro de un tiempo específico, se cancela automáticamente. Esto mejora la experiencia del usuario evitando que espere indefinidamente cuando el servidor no responde.

Este patrón crea un setTimeout que llama a abort() después de un tiempo específico. Si la petición se completa antes del timeout, limpiamos el timeout conclearTimeout() para evitar que se llame a abort() después de que la petición ya haya terminado. Es importante guardar la referencia al timeout para poder limpiarlo. El ejemplo muestra una función reutilizable fetchWithTimeoutque acepta un parámetro de timeout, permitiéndote aplicar timeouts consistentes en todas tus peticiones sin repetir código.

Cancelación de Múltiples Peticiones

Una sola señal de AbortController puede cancelar múltiples peticiones simultáneamente. Esto es útil cuando necesitas cancelar todas las peticiones relacionadas con una acción específica, como cuando el usuario navega a otra página o cierra un componente que hizo varias peticiones.

En este ejemplo, usamos una sola señal para tres peticiones diferentes. Cuando el usuario hace clic en cancelar, todas las peticiones se cancelan simultáneamente. Esto es especialmente útil en aplicaciones React donde un componente puede hacer múltiples peticiones y necesitas cancelarlas todas cuando el componente se desmonta.

Manejo de Errores AbortError

Cuando una petición es cancelada, se lanza un error AbortError. Es importante manejar este error correctamente para evitar que se muestre un mensaje de error genérico al usuario. El error AbortError no es realmente un error, sino una indicación de que la operación fue cancelada intencionalmente.

Este ejemplo muestra cómo diferenciar entre diferentes tipos de errores. El errorAbortError se maneja de forma diferente a otros errores de red o de servidor. Es importante verificar la propiedad name del error para identificar si es una cancelación, ya que el mensaje puede variar entre navegadores.

Casos de Uso Reales

AbortController tiene múltiples aplicaciones en el mundo real que mejoran la experiencia del usuario y el rendimiento de la aplicación. Aquí exploramos algunos de los casos más comunes donde la cancelación de peticiones es esencial.

Este ejemplo muestra tres casos de uso comunes: búsqueda con cancelación de peticiones anteriores (debounce), cancelación al desmontar un componente (útil en React), y cancelación al navegar a otra página. En todos estos casos, la cancelación evita que peticiones innecesarias consuman recursos y mejoren la respuesta de la aplicación.

• <strong>Búsqueda con debounce</strong>: Cancelar peticiones anteriores mientras el usuario escribe
• <strong>Desmontar componente</strong>: Cancelar peticiones cuando un componente se elimina
• <strong>Navegación</strong>: Cancelar peticiones al cambiar de página
• <strong>Timeout automático</strong>: Cancelar peticiones que tardan demasiado
• <strong>Carga diferida</strong>: Cancelar peticiones de contenido que ya no es visible