AngularJS: Esperando a resolver varias promesas

promises

En ocasiones, por obligaciones del guión, no nos queda más remedio que tener que llamar a un servicio de manera iterativa para obtener colecciones de datos de diferentes usuarios, clientes o datos relacionados. Lo que fácilmente el servidor podría resolverlo devolviendo un único JSON con todos los datos, se acaba convirtiendo en una tortura por un, digamos, fallo de diseño o de concepto en el desarrollo de la parte back.

En muchas ocasiones los fronts tendremos que lidiar con situaciones así e intentar conseguir una solución lo más elegante posible. Por lo general estas llamadas iterativas se producen de manera asíncronas por medio de llamadas Ajax, por lo que es complicado dar una buena solución y que a la vez todas las llamadas Ajax realizadas se esperen para obtener todos los resultados.

AngularJS y $q

En AngularJS el proceso cambia y se nos ofrece una manera elegante de esperar a tener todos los datos disponibles para trabajar con ellos. El servicio $q encargado del manejo de promesas en AngularJS, cuenta con un método que se encargará de realizar este proceso. El método es el siguiente:

$q.all(arrayPromesas, callback);

El método ‘all’, nos permite incluir dos parámetros, donde ‘arrayPromesas’ es un array con todas las promesas que debemos resolver antes de realizar cierta acción y ‘callback’ es la función callback que se ejecutará una vez que se hayan resuelto todas las promesas de ‘arrayPromesas’.

Pongamos un ejemplo

Para que veamos mejor el funcionamiento del servicio, he creado un ejemplo. El ejemplo trata de obtener las zonas horarias de determinados países que se encuentran en un array. Llamaremos a una API de terceros para realizar esto. Como la API no tiene una forma para obtener todas las zonas de todos los países en una sola petición, vamos a lanzar de manera iterativa peticiones a la API. Este es el código que necesitamos:

Se puede observar que el controlador se encarga de llamar al servicio que le proporciona las zonas horarias sin saber que se hace dentro del servicio, simplemente pasa una serie de países y obtiene una serie de zonas horarias.

El servicio es donde se encuentra la verdadera lógica. Lo que hacemos es iterar el array de países y llamar a la API. En esta ocasión, realizamos cuatro llamadas a la API. Lo que hacemos también es ir almacenando todas las promesas que nos devuelve el servicio $http para una vez que hemos terminado de iterar esperar a que todas las promesas terminen por medio del método ‘all’ del servicio ‘$q’.

De esta forma el controlador obtiene toda la información que necesita, sin saber cómo se obtiene. Como podemos ver, bastante sencillo y elegante a la vez.

Espero que os haya gustado este pequeño truco.

Nos leemos 🙂

PD: Podéis acceder al ejemplo completo aquí.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s