6.2 Servicio $q

El servicio de $q es un servicio de AngularJS que contiene toda la funcionalidad de las promesas. Tal y como se indica en su documentación, está basado en la implementación de Kris Kowal's Q.. AngularJS ha hecho su propia versión para que esté todo integrado en el propio framework.

Yo suelo comparar el sistema de promesas al problema del productor-consumidor. La similitud es que hay una parte que generará la información , por ejemplo el método $http y otra parte que consumirá la información, por ejemplo nuestro código. Esta separación es importante ya que hay 2 objetos con los que tendremos que tratar.

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 el siguiente diagrama UML podemos ver las distintas clases que forman parte de las promesas:

Una vez creada mediante el método defer(), una promesa se puede encontrar en alguno de los siguiente 3 estados:

• Pendiente: Aún no se sabe si se podrá o no obtener el resultado.
• Resulta: Se ha podido obtener el resultado. Se llega a este estado llamando al método defered.resolve()
• Rechazada: Ha habido algún tipo de error y no se ha podido obtener el resultado. Se llega a este estado llamando al método defered.reject()

Debido a que la promesa debe acabar en el estado Pendiente o Rechazado es obligatorio que siempre llamemos al método defered.resolve() o defered.reject().

Para explicar las promesas vamos a hacer un ejemplo de una función que acepta como parámetro dos valores y de forma asíncrona los retorna. Obviamente para hacer una simple suma no es necesario usar promesas ni retornarlo de forma asíncrona, pero servirá como ejemplo.

Lo primero es crear los 2 objetos que se necesitan en las promesas.

function sumaAsincrona(a,b) {
   var defered=$q.defer();
   var promise=defered.promise;
   
   return promise;
}

• Línea 1: La función acepta como argumentos 2 números , llamados a y b.
• Línea 2: Usando el servicio de $q obtenemos el objeto defered llamando al métdo defer(). Por supuesto el servicio $q debe ser inyectado de alguna forma pero aquí lo hemos obviado para simplificar la explicación.
• Línea 3: Desde el objeto defer se obtiene el objeto promise.
• Línea 5: Al que nos llama le devolvemos la promesa.

Ya tenemos los 2 objetos preparados y listos para ser usados. Ahora explicaremos más sobre cada uno de ellos.

El objeto defered sólo se usa desde dentro de la función asíncrona, por lo tanto el que llama a sumaAsincrona no sabe nada del objeto defered. Como ya hemos dicho, el objeto defered hará las funciones de productor de la información ¹⁾.

Este objeto tiene 2 métodos. Uno de ellos para indicar que se ha obtenido la información y por lo tanto hacer que la promesa pase al estado “Resuelto” y un segundo método para indicar que algo ha fallado y que no se ha podido obtener la información y por lo tanto hacer que la promesa pase al estado “Rechazado”.

Sigamos ahora con el ejemplo y usemos el servicio de $timeout para simular una respuesta asíncrona de la función.

function sumaAsincrona(a,b) {
   var defered=$q.defer();
   var promise=defered.promise;
   
   $timeout(function() {
      try{
         var resultado=a+b;
         defered.resolve(resultado);
      } catch (e) {
         defered.reject(e);
      }   
   },3000); 
   
   return promise;
}

• Línea 5: Ponemos un timeout para que pasados 3 segundos ²⁾ se ejecute la función.
• Línea 7: Aqui es donde calculamos la información que sea necesaria. Lo único que hacemos es sumar los 2 valores que nos pasaron.
• Línea 8: Indicamos que todo ha ido bien y retornamos el resultado.
• Línea 10: Si algo ha fallado lo indicamos llamando a reject. En este caso pasamos como valor de retorno la propia excepción que se ha generado.

Acabamos de ver lo que hay que hacer internamente para producir la información en la función sumaAsincrona. Ahora pasemos al otro lado del problema. Veamos qué ocurre al llamar a nuestra función asíncrona, es decir en la parte del consumidor.

Lo primero que debemos hacer es llamar a la función asíncrona y guardarnos la promesa que nos retorna.

var promise=sumaAsincrona(5,2);

• Línea 1: Llamar a la función asíncrona y guardarnos la promesa que nos retorna.

¿Cómo podemos saber ahora si se ha podido o no obtener el dato? ¿Y cómo obtenemos el dato? El objeto promise tiene un método llamado then, el cual acepta que le pasemos 2 funciones de callback para saber lo que ha ocurrido. La primera función se llamará si se ha obtenido la información y por lo tanto si la promesa ha sido resuelta. La segunda función ³⁾ se llamará si algo ha fallado y por lo tanto si la promesa ha sido rechazada.

var promise=sumaAsincrona(5,2);

promise.then(function(resultado) {
  $scope.mensaje="El resultado de la promesa es:" + resultado;
}, function(error) {
  $scope.mensaje="Se ha producido un error al obtener el dato:"+error;
});

• Línea 3: Llamamos al método then del objeto promise y le pasamos las 2 funciones.
• Línea 4: La promesa ha sido resuelta y aquí nos guardamos en el $scope el resultado que nos ha llegado a través de la promesa.
• Línea 5: Especificamos la función de error para cuando no se puede obtener la información.
• Línea 6: La promesa ha sido rechazada ya que algo ha fallado y en este caso generamos en mensaje de error.

<!DOCTYPE html>
<html ng-app="app">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
    <script src="//code.angularjs.org/1.2.19/i18n/angular-locale_es-es.js"></script>
    <script src="script.js"></script>
  </head>
  <body ng-controller="PruebaController">
    {{mensaje}}
  </body>
</html>

var app = angular.module("app", []);

app.controller("PruebaController", ['$scope', '$q', '$timeout',function($scope, $q, $timeout) {

    $scope.mensaje = "Esperando a que se resuelva la promesa"

    function sumaAsincrona(a, b) {
      var defered = $q.defer();
      var promise = defered.promise;

      $timeout(function() {
        try {
          var resultado = a + b;
          defered.resolve(resultado);
        } catch (e) {
          defered.reject(e);
        }
      }, 3000);

      return promise;
    }

    var promise = sumaAsincrona(5, 2);

    promise.then(function(resultado) {
      $scope.mensaje = "El resultado de la promesa es:" + resultado;
    }, function(error) {
      $scope.mensaje = "Se ha producido un error al obtener el dato:" + error;
    });

}]);

    sumaAsincrona(5, 2).then(function(resultado) {
      $scope.mensaje = "El resultado de la promesa es:" + resultado;
    }, function(error) {
      $scope.mensaje = "Se ha producido un error al obtener el dato:" + error;
    });

• $q