Cuando desarrollamos aplicaciones, realizamos solicitudes de API a los servidores por diferentes motivos: para autenticar las credenciales de los usuarios, obtener recursos, crear recursos y mucho más… Cómo cancelar solicitudes de API en JavaScript puede ser necesario en alguna que otra ocasión.
¿Sabías que se puede abortar una solicitud de API en JavaScript? Con abortar, me refiero a cancelar una solicitud antes de que se complete (antes de que reciba una respuesta o antes de que la solicitud llegue al servidor).
Hay muchas razones por las que puede querer hacer esto. Una de ellas es evitar que se envíe una solicitud al servidor si el usuario ya se ha alejado de la página en la que se realizó la solicitud por ejemplo.
La cancelación de solicitudes puede ayudarlo a evitar tráfico de red innecesario, ahorrar recursos y uso de memoria y mejorar el rendimiento.
Hay muchas formas de realizar solicitudes de API en JavaScript. En este artículo, me centraré en fetch y axios.
Tabla de contenidos
Cómo cancelar solicitudes de API en JavaScript
La interfaz AbortController
La API Web expone la interfaz AbortController
, un objeto de JavaScript que le permite cancelar solicitudes cuando lo desee. Aquí se explica cómo crear un objeto AbortController
:
const controller = new AbortController()
Este objeto controller
tiene dos propiedades importantes para cancelar solicitudes:
- La primera propiedad es el objeto
signal
. Este objeto es un identificador único para la solicitud. La estructura de este objeto es la siguiente:{ // other properties aborted: false, onabort: null }
- La segunda propiedad es un método llamado
abort()
. Este método se utiliza para actualizar la banderaabort
de la señal de solicitud única. Cuando se llama a este método, se notificará a todos los observadores del objetosignal
y se cancelarán las solicitudes.
Veamos un ejemplo:
const controller = new AbortController(); const abortSignal = controller.signal; function abortRequest() { controller.abort(); }
Cuando se llama a la función abortRequest
en cualquier punto de su aplicación (como un evento de clic de botón, por ejemplo), se llama al método de cancelación, el objeto abortSignal
se actualizará y se notificará a todos los observadores.
Ahora veamos cómo usar esto en fetch y axios.
Cancelar solicitudes API en Fetch
El método fetch
es una función de JavaScript que se utiliza para realizar solicitudes de API. Toma dos argumentos: la URL del punto final de la API y un objeto que contiene las opciones de solicitud:
fetch(api, requestOptions)
El objeto requestOptions
acepta muchas propiedades, pero la más importante es la propiedad signal
. Entonces puede adjuntar el objeto signal
del controlador a esta propiedad:
const controller = new AbortController(); const abortSignal = controller.signal; function abortRequest() { controller.abort(); } fetch("api", { signal: abortSignal, });
Con esto, cuando se llame a la función abortRequest
, se notificará a fetch
y se cancelará la solicitud.
Cancelar solicitudes API en Axios
Axios es una biblioteca de JavaScript que se utiliza para realizar solicitudes de API. Tiene una sintaxis muy similar al método fetch
. También acepta una propiedad singal
en el objeto de opciones de solicitud. Entonces también podemos adjuntar el objeto signal
del controlador de esta manera:
const controller = new AbortController(); const abortSignal = controller.signal; function abortRequest() { controller.abort(); } axios.get("api", { signal: abortSignal, });
Cuando el flag de abortado del objeto signal
se actualice a true
, se notificará a esta expresión de axios y se cancelará la solicitud.
Espero que el artículo «Cómo cancelar solicitudes de API en JavaScript» te haya sido de ayuda ❤️