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 cambio implica que en los métodos get y list ya no se pasan 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 como queda la función del servicio.

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;
  }
}

• 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 solo se permite un único parámetro solo pasamos el status ya que era lo único que se usaba.
• Líneas 19,20,26 y 28 : Son los mismos cambio pero en vez de en la función get son el list.
• Línea 32: Retornamos la promesa.

Ahora veamos como se crea el provider

function RemoteResourceProvider() {
  var _baseUrl;
  this.setBaseUrl = function(baseUrl) {
    _baseUrl = baseUrl;
  }
  this.$get = ['$http','$q',function($http,$q) {
      return new RemoteResource($http,$q, _baseUrl);
  }];
}

• 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.

Ahora modificamos los controladores DetalleSeguroController y ListadoSeguroController para que hagan las llamdas al servicio usando las promesas.

    remoteResource.get().then(function(seguro) {
      $scope.seguro = seguro;
    }, function(status) {
      alert("Ha fallado la petición. Estado HTTP:" + status);
    });

    remoteResource.list().then(function(seguros) {
      $scope.seguros = seguros;
    }, function(status) {
      alert("Ha fallado la petición. Estado HTTP:" + status);
    });

El cambio en ambos controladores es solo 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.

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

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 mas complejas gracias a todas las utilidades que ofrecen las promesas.