Curso de AngularJS y REST

Esta página es de solo lectura. Puedes ver la fuente pero no puedes cambiarla. Pregunta a tu administrador si crees que esto es incorrecto.
====== 6.4 Ejemplo de promesa ======
Para acabar esta unidad vamos a seguir con el ejemplo del seguro médico y vamos a modificar el servicio ''remoteResource'' para que ahora haga uso de las promesas y los controladores que lo usan para adecuarse al nuevo interfaz del servicio.

===== El servicio =====
El cambio implica que en los métodos ''get'' y ''list'' ya no se pasen como parámetros las funciones de //callback// sino que ahora se retorna una promesa y desde los controladores se añaden a la promesa las funciones de //callback//.

Veamos cómo queda la función del servicio.

<sxh js;highlight: [1,3,4,10,12,19,20,26,28,32]>
function RemoteResource($http,$q, baseUrl) {
  this.get = function() {
    var defered=$q.defer();
    var promise=defered.promise;
    
    $http({
      method: 'GET',
      url: baseUrl + '/datos.json'
    }).success(function(data, status, headers, config) {
      defered.resolve(data);
    }).error(function(data, status, headers, config) {
      defered.reject(status);
    });
    
    return promise;
    
  }
  this.list = function() {
    var defered=$q.defer();
    var promise=defered.promise;    
    
    $http({
      method: 'GET',
      url: baseUrl + '/listado_seguros.json'
    }).success(function(data, status, headers, config) {
      defered.resolve(data);
    }).error(function(data, status, headers, config) {
      defered.reject(status);
    });
    
    
    return promise;
  }
}
</sxh>
  * Línea 1: Ahora la función tiene un nuevo parámetro con el servicio ''$q''.
  * Línea 3: Creamos el objeto ''defered''
  * Línea 4: Creamos la promesa que retornará la función.
  * Línea 10: Ya no llamamos a la función de //callback// de OK sino que resolvemos la promesa.
  * Línea 12: Ya no llamamos a la función de //callback// de error sino que rechazamos la promesa. Como sólo se permite un único parámetro solamente pasamos el ''status'' ya que era lo único que se usaba.
  * Líneas 19,20,26 y 28 : Son los mismos cambios pero en vez de en la función ''get'' son en el ''list''.
  * Línea 32: Retornamos la promesa.

Ahora veamos cómo se crea el provider.

<sxh js;highlight: [6,7]>
function RemoteResourceProvider() {
  var _baseUrl;
  this.setBaseUrl = function(baseUrl) {
    _baseUrl = baseUrl;
  }
  this.$get = ['$http','$q',function($http,$q) {
      return new RemoteResource($http,$q, _baseUrl);
  }];
}
</sxh>
  * Línea 6: Inyectamos el servicio de promesas llamado ''$q''.
  * Línea 7: Al crear el objeto le pasamos también el servicio de ''$q''.
===== Los controladores =====
Ahora modificamos los controladores ''DetalleSeguroController'' y ''ListadoSeguroController'' para que hagan las llamadas al servicio usando las promesas.

<sxh js; title:Controlador DetalleSeguroController>
    remoteResource.get().then(function(seguro) {
      $scope.seguro = seguro;
    }, function(status) {
      alert("Ha fallado la petición. Estado HTTP:" + status);
    });
</sxh>

<sxh js; title:Controlador ListadoSeguroController>
    remoteResource.list().then(function(seguros) {
      $scope.seguros = seguros;
    }, function(status) {
      alert("Ha fallado la petición. Estado HTTP:" + status);
    });
</sxh>

El cambio en ambos controladores es sólo en las llamadas a ''get'' y ''list'' para que hagan uso del método ''then'' en vez de pasar directamente las funciones de //callback// al llamar a ''get'' y ''list''.

===== Ejemplo =====
Lo único que hemos modificado es el fichero ''script.js'' con los cambios que hemos indicado. 


{{url>http://embed.plnkr.co/OQHvq6}}

===== Resumen =====
Después de ver tantos aspectos de las promesas vemos que crear servicios que usen promesas es muy sencillo y permite que dichos servicios puedan ser usados de formas mucho más complejas gracias a todas las utilidades que ofrecen las promesas.