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