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.