WEB API – Cancelando una petición web usando AbortController

WEB API – Cancelando una petición web usando AbortController

En esta nueva entrada del blog me gustaría mostrar el uso de del objeto AbortController y además crear algún ejemplo para ver las posibilidades que nos ofrece.

¿Pero, para qué podemos usar este objeto?. Bien, la finalidad de este objeto es poder cancelar una petición web generada por la API Fetch.

Aunque nos pueda parecer muy simple su uso, en la actualidad la mayoría de las aplicaciones web hacen uso de peticiones web para comunicarse con un servicio y este objeto nos puede ser muy util.

En el siguiente enlace podéis acceder a la documentación oficial, no obstante a continuación añadiré una pequeña aplicación que he creado para hacer uso de este objeto y el código fuente en un repositorio de Github.

Como funciona el código

La aplicación es muy sencilla ya que la finalidad de este ejemplo es entender el funcionamiento del objeto AbortController.

Si acedéis al repositorio, dentro encontraréis un fichero llamado api.js que contiene el código que hace uso del objeto AbortController.

 export const ABORT = {
  controller: null,
  signal: null,
  abort: () => {
    ABORT.controller = ABORT.controller || new AbortController();
    ABORT.controller.abort();
  },
  new: () => {
    ABORT.controller = new AbortController();
    ABORT.signal = ABORT.controller.signal;
    return {
      signal: ABORT.signal,
    }
  }
}

Como podemos ver, he creado un método llamado abort (línea 4), el cual genera un nuevo controlador u obtiene el existente (línea 5) y a continuación aborta la petición web (línea 6). Este método será el encargado de abortar nuestra petición web usando el método abort() del objeto AbortController.

Tambíen he creado otro método llamado new (línea 8), que será el encargado de generar un nuevo controlador (línea 9) para obtener la señal (línea 10) de control y finalmente devolverla para su uso en la API Fetch (línea 12).

En este punto lo único que hemos hecho es crear unos helpers para usarlos donde necesitemos. A continuación vamos a ver un ejemplo donde usaremos estos helpers y que se encuentra en el archivo index.js.

  search.addEventListener('keyup', async function() {
    const search = `${allServices[type.value]}?search=${this.value}`;
    if (this.value.length > 0) {
      try {
        ABORT.abort();
        const { signal } = ABORT.new();
        const { results } = await API_SERVICES.getServices(search, signal);
        showResults(results);
      } catch(err) {
        console.log('Fetch canceled', err);
      }
    }
  });

La lógica que he decido realizar para este ejemplo es muy simple, cada vez que pulsemos una tecla y  a continuación la dejemos de pulsar (línea 1), si cumple la condición abortara la petición web que se encuentre pendiente en ese momento.

Lo siguiente que necesitamos hacer es generar una nueva señal y para ello llamaremos al método new (linea 6) que creamos en el código anterior y este nos devolverá la señal para controlar la siguiente petición web.

Finalmente realizamos la llamada a nuestro servicio y como argumento le pasaremos la señal (línea 7).

Video final y la aplicación

Desde aquí podéis usar la aplicación y comprobar con las herramientas de desarrollador del navegador abiertas, accediendo a la pestaña de red como se está abortando la petición web.

Por último voy añadir un video donde muestro como funciona y lo util que puede llegar a ser este objeto.