¡Esta es una revisión vieja del documento!
El servicio de $q es un servicio de AngularJS que contiene toda la funcionalidad de las promesas. Tal y como indican 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 con el propio framework.
El sistema de promesas yo lo suelo comparar al problema del productor-consumidor. La similitud es en 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 promesa una vez creada mediante el método defer()
se puede encontrar en alguno de los siguiente 3 estados:
defered.resolve()
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; }
a
y b
.$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.defer
se obtiene el objeto promise
.Ya tenemos los 2 objetos preparados y listos para ser usados. Ahora explicaremos mas sobre cada uno de ellos.
El objeto defered
solo 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 1)
Este objeto tiene de 2 métodos. Uno de ellos para indicar que se han obtenido la información y un segundo método para indicar que hago ha fallado y que no se ha podido obtener la información.
Método | Parámetros | Descripción |
---|---|---|
resolve | resolve(resultado) | Llamaremos a este método para indicar que ya tenemos la información que se solicitó y por lo tanto que la promesa está resuelta. Siendo el parámetro resultado el que contiene la información solicitada. |
reject | reject(error) | Llamaremos a 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. Conteniendo el parámetro error información relativa a la naturaleza del error. |
Hay que fijarse que el objeto defered
no dice nada relativo al tipo de información que se retorna ni a la estructura de la misma. Eso ya dependerá de cada uno de los métodos que creemos que usen promesas.
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; }
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 lo que 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);
¿Como nos enteramos ahora si se ha podido o no obtener el dato? ¿Y como obtenemos el dato? El objeto promise
tiene un método llamado then
, el cual acepta que le pasemos 2 funciones de callback para saber que ha ocurrido. La primera de ella se llamará si se ha obtenido la información y la segunda de ellas si algo ha fallado.
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; });
then
del objeto promise
y le pasamos las 2 funciones.$scope
el resultado que nos ha llegado a través de la promesa
<!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; }); }]);