Połączenia łańcuchowe Ajax w AngularJs

Question

Chciałbym wykonywać wiele połączeń Ajax w łańcuchu. Ale chciałbym także masować dane po każdym połączeniu przed następnym połączeniem. W końcu, gdy wszystkie połączenia są zakończone pomyślnie, chciałbym uruchomić inny kod.

Używam usługi Angular $ http dla moich połączeń Ajax i chciałbym się do tego przyłączyć.

Czy to możliwe?

Answer 1

Tak, jest to obsługiwane bardzo elegancko przez AngularJS, ponieważ jego usługa jest zbudowana wokół PromiseAPI. Zasadniczo, połączenia z metodami $http zwrócą obietnicę i można łatwo połączyć obietnice za pomocą metody then. Oto przykład:

$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 
    }); 

Można również połączyć obróbkę i następny $http funkcji, jak również, to wszystko zależy od tego, kto jest zainteresowany w wynikach.

$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 
    }); 

Answer 2

Przyjęta odpowiedź jest dobra, ale nie wyjaśnia złapania i wreszcie metod, które naprawdę kładą wisienką na torcie. Ten great article on promises postawił mnie prosto. Oto przykładowy kod na podstawie tego artykułu:

$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(); 
    });