Verkettung Ajax ruft in AngularJs

Question

Ich möchte mehrere Ajax-Aufrufe in einer Kette machen. Aber ich möchte auch die Daten nach jedem Anruf massieren, bevor ich den nächsten Anruf tätige. Am Ende, wenn Alle Anrufe erfolgreich sind, möchte ich etwas anderen Code ausführen.

Ich benutze Angular $ http Service für meine Ajax-Anrufe und möchte dabei bleiben.

Ist es möglich?

Answer 1

Ja, dies wird von AngularJS sehr elegant gehandhabt, da sein Dienst $http um die PromiseAPI herum aufgebaut ist. Grundsätzlich geben Aufrufe an $http Methoden ein Versprechen zurück und Sie können Versprechen sehr einfach verketten, indem Sie die then Methode verwenden. Hier ein Beispiel:

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

Sie auch Post-Processing und neben $http Funktion auch kombinieren könnten, es hängt alles davon ab, die interessiert an den Ergebnissen.

$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

Die akzeptierte Antwort ist gut, aber nicht den Fang erklären und schließlich Methoden, die wirklich das Sahnehäubchen auf dem Kuchen setzen. Diese great article on promises setzte mich gerade. Hier ist ein Beispielcode, der auf diesem Artikel basiert:

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