Diferencias

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

--- unidades:06_promesas:04_ejemploseguro [2014/08/16 11:53] – creado admin
+++ unidades:06_promesas:04_ejemploseguro [2014/09/02 00:23] (actual) – admin
@@ Línea 1: / Línea 1: @@
 ====== 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.