AngularJS - ¿Que son las Promise/Promesas en AngularJS? -¿Como utilizar Promesas en AngularJS? - Métodos de las Promesas

Hola siguiendo con nuestra guía de AngularJS hoy vamos a ver a explicar las "Promise" o Promesas, nos gustaría avanzar hacia Ajax pero es clave que se entienda bien las "Promise".

AngularJS - ¿Que son las Promise/Promesas en AngularJS?

Un objeto promesa representa un valor que puede no estar disponible todavía, pero será en algún momento en el futuro. Te permite escribir código asíncrono de una manera más sincrónica. Esto significa que su función asíncrona volverá inmediatamente y puede tratar este valor de retorno como una aproximación al valor real que va a obtener en el futuro.

EHHHHH?

Básicamente cuando utilizamos llamadas Ajax las llamadas son asincronicas, es decir no bloquean la pagina web para que el usuario se quede colgado mirando la ventana, si no que le ponemos un lindo gif en una parte de la pantalla y sigue como si nada, una vez que los datos son devueltos recién ahí se impactan a la pantalla, esta demora en actualizar los datos se llama "callbacks".

Si bien las promesas no solucionan el problema de los "callbacks", si solucionan el problema de la pirámide de la muerte (en ingles Pyramid of Doom) o "callbacks hell".

Supongamos que tenemos código que hace lo siguiente:

• Consulta si el usuario existe. 
• Si el usuario existe busca si tiene pedidos.
• Si tiene pedidos el estado de cada uno de los pedidos.
• Si los pedidos no están en estado entregados, busca donde esta.

Supongamos que nuestro desarrollador no es una luz y en ves de hacer todo esto sobre un manager, crea solo estos métodos de consulta. Lo cual tenemos que hacer llamadas que depende del resultado de cada método para seguir llamando. En código quedaría tabulado como una Piramide.

obj.metodo1(data, function(dato1){ 
 obj.metodo2(data, function(dato2){
  obj.metodo3(data, function(dato3){ 
   obj.metodo4(data, function(dato4){
    //Hasta terminar la cantidad de consultas que tenemos 
    //que realizar
   });
  });
 });
});

En el código de arriba intente simplificarlo es decir obviamos los mensajes de error.

Las promesas nos facilitan esto mediante un try-catch, enmascarado como then-catch!.

promise
.then(function(data) {
  // Invocado cuando el flujo es normal
})
.catch(function(err) {
  // Invocado cuando sucede un error
})
.finally(function(data) {
  // Invocado siempre, sin importar si el resultado fue normal o hubo un error.
})

Cuando tenemos una promesa, el método .then() se invocará cuando tengamos una respuesta sin fallos, el método catch() se invocará cuando se produzca un error, y el método finally() se invocará independientemente del resultado de la función.

Angular viene con un recubrimiento sobre XMLHttpRequest (también conocido como XHR, que es lo que permite tener AJAX) invocando a $http. El objeto $http es una librería que nos ayuda a hacer peticiones HTTP y procesar la respuesta. A menudo usaremos $http. En el proximo post hablaremos mas de Ajax y $http!.

Las peticiones XHR son asíncronas. Esto significa que nuestra petición no tiene que parar la ejecución de nuestra aplicación y esperar una respuesta del servidor. La ventaja de ello es que el usuario puede seguir utilizando la aplicación mientras se hace la petición HTTP, pero introduce problemas ya que hemos de manejar la respuesta una vez que los datos vuelvan del servidor. Debido a esto, el flujo del control asíncrono puede volverse complicado si no contamos con las herramientas adecuadas.

Por lo general, tenemos dos opciones

• Pasar una función que actúe como callback. Esta función se invocará cuando finalice la petición HTTP.
• Utilizar una promesa. Esta es la aproximación que sigue Angular.

El objeto $http devuelve una promesa cuando se completa una petición XHR. Una vez hecho esto, para interactuar con nuestra petición, simplemente usaremos la función .then() para cargar los datos en nuestro objeto $scope.

AngularJS - ¿Como utilizar Promesas en AngularJS?

Ya explicado el tema de las promesas, es hora que de llevar esto a la practica, si bien deberíamos explicar un poco los servicios para ver la codificación de las Promesas, explicaremos servicios en próximas entregas.

En la nomenclatura de AngularJS al productor se le llama defered y al consumidor se le llama promise. Mediante el servicio de $q obtenemos el objeto defered llamando el método defer() y a partir de él obtenemos el objeto promise llamando a la propiedad promise.

En la cabecera de nuestro controller hacemos el llamado a la libreria $q.

angular.module("miApp", []).controller("myCtrl", function($q) {

Dentro del nuestro controller, pedimos un objeto defered al método defer del servicio $q.

var diferir = $q.defer();
     diferir.promise.then(function(){
         alert("Hola El Lado Oscuro de Java");
     });
 diferir.resolve();

Luego al objeto defered le solicitamos el objeto promise que posee y que utilice el método then, dentro del function(){ realizamos las instrucciones que deseamos. Cerramos las llaves y parentesis. Y finalmente le decimos que resuelva el objeto defered mediante el método resolve() o nunca se dará por terminado.

AngularJS - Métodos de las Promesas

Por el momento ya vimos la definición técnica de las promesas en AngularJS, vimos un pequeño código de su implementanción ahora explicaremos los métodos que posee.

Servicio $q

El servicio $q en AngularJS posee los siguientes métodos:

• all(): Este método permite retornar una única promesa que unifica a varias promesas
• defer(): Retorna un nuevo objeto defered.
• reject(): Este método crea una promesa que es resuelta cuando es rechazada por una razón especifica.
• when(): Este método permite convertir un valor a una promesa.

Objeto Defered

El objeto Defered a su ves posee lo siguiente:

• Promise: Es una promesa.
• resolve(): Este método sirve para indicar que ya tenemos la información que se solicitó y por lo tanto que la promesa está resuelta.
• reject(): Este método para indicar que no ha sido posible obtener la información que se solicitó y por lo tanto que la promesa está rechazada,
• notify(): Este método responde el estatus de la promesa. No es posible llamar a defered.notify() una vez se haya resuelto la promesa pero tampoco antes de que se llame al método promise.then. Ésto último implica que no se puede llamar dentro de la función antes de retornar el objeto de la clase Promise.

Restaría explicar los métodos del Promise pero ya lo hicimos arriba :D. Cualquier duda como siempre pueden preguntar. Saludos.