Diferencias

Muestra las diferencias entre dos versiones de la página.

Enlace a la vista de comparación

unidades:06_promesas:04_ejemploseguro [2014/08/16 11:53]
admin creado
unidades:06_promesas:04_ejemploseguro [2014/09/02 00:23] (actual)
admin
Línea 1: Línea 1:
 ====== 6.4 Ejemplo de promesa ====== ====== 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.
unidades/06_promesas/04_ejemploseguro.1408182804.txt.gz · Última modificación: 2014/08/16 11:53 por admin
Ir hasta arriba
CC Attribution-Share Alike 3.0 Unported
chimeric.de = chi`s home Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0