Encadenando llamadas Ajax en AngularJs

Me gustaría hacer múltiples llamadas Ajax en una cadena. Pero también me gustaría dar masajes a los datos después de cada llamada antes de hacer la próxima llamada. Al final, cuando todas las llamadas sean exitosas, me gustaría ejecutar otro código.

Estoy usando el servicio Angular $ http para mis llamadas Ajax y me gustaría mantenerlo.

¿Es posible?

Sí, AngularJS lo maneja muy elegantemente, ya que su servicio $http se basa en PromiseAPI. Básicamente, las llamadas a $http métodos $http devuelven una promesa y usted puede encadenar promesas muy fácilmente utilizando el método then . Aquí hay un ejemplo:

 $http.get('http://host.com/first') .then(function(result){ //post-process results and return return myPostProcess1(result.data); }) .then(function(resultOfPostProcessing){ return $http.get('http://host.com/second'); }) .then(function(result){ //post-process results of the second call and return return myPostProcess2(result.data); }) .then(function(result){ //do something where the last call finished }); 

También puede combinar el post-procesamiento y la próxima función $http , todo depende de quién esté interesado en los resultados.

 $http.get('http://host.com/first') .then(function(result){ //post-process results and return promise from the next call myPostProcess1(result.data); return $http.get('http://host.com/second'); }) .then(function(secondCallResult){ //do something where the second (and the last) call finished }); 

La respuesta aceptada es buena, pero no explica la captura y finalmente los métodos que realmente ponen la guinda del pastel. Este gran artículo sobre promesas me ha aclarado. Aquí hay un código de muestra basado en ese artículo:

 $scope.spinner.start(); $http.get('/whatever/123456') .then(function(response) { $scope.object1 = response.data; return $http.get('/something_else/?' + $scope.object1.property1); }) .then(function(response) { $scope.object2 = response.data; if ($scope.object2.property88 == "a bad value") throw "Oh no! Something failed!"; return $http.get('/a_third_thing/654321'); }) .then(function(response) { $scope.object3 = response.data; }) .catch(function(error) { // this catches errors from the $http calls as well as from the explicit throw console.log("An error occured: " + error); }) .finally(function() { $scope.spinner.stop(); });