Peticiones en paralelo a una API en React y Vue

Hacer peticiones secuenciales (una tras otra) a una API puede llegar a ser muy lento. Existe una manera en la que puedes hacer muchas peticiones al mismo tiempo y de esta manera reducir el tiempo de espera para la información que necesitas.

En este artículo aprenderás:

  1. El método Promise.all().
  2. ¿Por qué usarlo?
  3. Sus casos de uso.
  4. Usarlo para hacer peticiones en paralelo a una api.

Promise.all()

"El método Promise.all(iterable) devuelve una promesa que termina correctamente cuando todas las promesas en el argumento iterable han sido concluídas con éxito, o bien rechaza la petición con el motivo pasado por la primera promesa que es rechazada." (Fuente)

En palabras más simples , Promise.all() devuelve correctamente cuando todas las promesas dentro de él se resuelven de manera exitosa, de lo contrario devuelve un error.

¿Por qué usarlo?

Este método nos permite crear muchas promesas al mismo tiempo, lo cual hace que la espera para que devuelva de manera exitosa (o con error) se limita únicamente al tiempo más largo de cualquiera de las promesas que tiene adentro, en lugar de esperar a que cada promesa se resuelva una tras otra.

Algunos casos de uso:

  1. Cuando necesitas hacer peticiones a una API que está paginada y no devuelve toda la información en una sola respuesta.
  2. Cuando necesitas hacer muchas peticiones individuales a una API. (eg. Solicitar información de N categorías diferentes al endpoint /categorias/:id )
  3. Cuando pretendes publicar algo a más de un destino (p.ej. Un post a facebook, instagram, twitter y tiktok) y captar un error si cualquiera de ellos falla.

Peticiones en paralelo a una API

En el siguiente ejemplo utilizamosx Promise.all() para hacer 10 llamadas distintas a una API al mismo tiempo. Cada llamada va a devolver la información de una película en particular. En cuanto resuelva de manera exitosa el método se van a renderizar las 10 peliculas y en caso de que cualquiera de las 10 llamadas devuelva error, no renderizará nada.

;

Ayúdame a mejorar este artículo

¿Quisieras complementar este artículo o encontraste algún error?¡Excelente! Envíame un correo.

  • seb@sebastianfdz.com