Cómo cancelar solicitudes de API en JavaScript

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.

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 bandera abort de la señal de solicitud única. Cuando se llama a este método, se notificará a todos los observadores del objeto signal 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 ❤️