{"id":697,"date":"2019-05-21T16:36:04","date_gmt":"2019-05-21T21:06:04","guid":{"rendered":"http:\/\/gregorgonzalez.com.ve\/blog\/?p=697"},"modified":"2019-05-22T13:37:23","modified_gmt":"2019-05-22T18:07:23","slug":"angular-combinando-promises","status":"publish","type":"post","link":"http:\/\/gregorgonzalez.com.ve\/blog\/angular-combinando-promises\/","title":{"rendered":"AngularJs &#8211; Combinando promises"},"content":{"rendered":"<p>Cuando trabajamos con webservices de los cuales obtenemos datos para nuestra aplicaci\u00f3n, muchas veces requerimos hacer varias peticiones, \u00e9stas pueden ser separadas individuales que se ejecutan en alg\u00fan proceso, acci\u00f3n o en la carga principal. Cuando trabajamos en la inicializaci\u00f3n o necesitamos cargar un grupo de peticiones al mismo tiempo, podemos combinarlas para que carguen todos los datos al terminar todas las peticiones, con esto nos aseguramos de tener toda la informaci\u00f3n.<\/p>\n<p>Las promesas (promises) en Javascript, es un objeto que nos ayuda en las operaciones as\u00edncronas (peticiones AJAX) para indicar la finalizaci\u00f3n correcta o fallida de dicha petici\u00f3n. Como ser\u00eda en Javascript puro o usando JQuery, a este objeto promise le pasamos las funciones callback para realizar una acci\u00f3n en caso de \u00e9xito o fallo.<\/p>\n<p>En caso de que necesitemos realizar varias peticiones ajax y esperar por el resultado para luego utilizarlo en otra petici\u00f3n o necesitemos esperar por todas las peticiones, lo mejor es combinarlos. Com\u00fanmente realiz\u00e1bamos concatenaciones de los callback, uno dentro de otro, de manera que al finalizar uno, continuara con el siguiente, pero esto no es nada pr\u00e1ctico y se le conoce como \u00abCallback Hell\u00bb.<\/p>\n<pre class=\"lang:js decode:true\">peticion1(function (valor1) {\r\n    peticion2(valor1, function(valor2) {\r\n        peticion3(valor2, function(valor3) {\r\n            \/\/ Realizar operaci\u00f3n\r\n        });\r\n    });\r\n});<\/pre>\n<p>En Angular realizamos las peticiones mediante el servicio $http y aunque tambi\u00e9n se pueden combinar concatenando los promises, Angular nos provee de una alternativa, el m\u00e9todo: $q.all(), donde $q es un servicio de Angular que nos facilita ejecutar funciones as\u00edncronas.<\/p>\n<p>$q.all() nos permite esperar por todas las promesas con un array de objetos y combinarlas como si fuese una sola petici\u00f3n.<\/p>\n<pre class=\"lang:js decode:true \">app.controller('Ctrl', function ($scope, $http, $q) {\r\n    var config = {\r\n        headers: {\r\n            'Content-Type': 'application\/json'\r\n        }\r\n    };\r\n\t\t\r\n    var autores = $http.get(\"\/ws\/autores\", config)\r\n        .then(function (response) {\r\n            $scope.listAutores = response.data;\r\n        }, _error); \r\n                \r\n    var libros = $http.get(\"\/ws\/libros\", config)\r\n        .then(function (response) {\r\n            $scope.listLibros = response.data;\r\n        }, _error); \r\n                \r\n    $q.all(autores,libros).then(function(result){\r\n        \/\/ Realizar operaci\u00f3n\r\n    });\t\r\n});<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Cuando trabajamos con webservices de los cuales obtenemos datos para nuestra aplicaci\u00f3n, muchas veces requerimos hacer varias peticiones, \u00e9stas pueden ser separadas individuales que se ejecutan en alg\u00fan proceso, acci\u00f3n o en la carga principal. Cuando trabajamos en la inicializaci\u00f3n o necesitamos cargar un grupo de peticiones al mismo tiempo, podemos combinarlas para que carguen [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":691,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"categories":[232,34],"tags":[218,251,252],"_links":{"self":[{"href":"http:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/posts\/697"}],"collection":[{"href":"http:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/comments?post=697"}],"version-history":[{"count":2,"href":"http:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/posts\/697\/revisions"}],"predecessor-version":[{"id":699,"href":"http:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/posts\/697\/revisions\/699"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/media\/691"}],"wp:attachment":[{"href":"http:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/media?parent=697"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/categories?post=697"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/tags?post=697"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}