Muestra las diferencias entre dos versiones de la página.
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. |