Concatenamento chiamate Ajax in AngularJs

Question

Vorrei effettuare più chiamate Ajax in una catena. Ma vorrei anche massaggiare i dati dopo ogni chiamata prima di effettuare la prossima chiamata. Alla fine, quando le chiamate Tutte e hanno esito positivo, vorrei eseguire un altro codice.

Utilizzo il servizio $ http angolare per le chiamate Ajax e vorrei attenermi a ciò.

È possibile?

Answer 1

Sì, questo è gestito in modo molto elegante da AngularJS poiché il suo servizio $http è costruito attorno a PromiseAPI. Fondamentalmente, le chiamate ai metodi $http restituiscono una promessa e puoi concatenare molto facilmente le promesse utilizzando il metodo then. Ecco un esempio:

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

Si potrebbe anche combinare post-elaborazione e successiva funzione $http così, tutto dipende da chi è interessato ai risultati.

$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

La risposta accettata è buona, ma non spiega il problema e infine i metodi che hanno messo davvero la ciliegina sulla torta. Questo great article on promises mi ha impostato dritto. Ecco un codice di esempio basato su quell'articolo:

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