在AngularJs中鏈接Ajax調用

Question

我想在鏈中創建多個Ajax調用。但我也想在每次通話後按摩數據，然後再進行下一次通話。最後，當全部調用成功，我想運行一些其他的代碼。

我爲我的Ajax調用使用了Angular $ http服務，並希望堅持這一點。

可能嗎？

Answer 1

是的，這是由AngularJS處理得非常優雅，因爲它的$http服務是圍繞PromiseAPI構建的。基本上，撥打$http方法返回一個承諾，您可以通過使用then方法很容易地鏈接承諾。這裏有一個例子：

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

您還可以結合後處理和下一$http功能以及，這一切都取決於誰是感興趣的結果。

$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

接受的答案是好的，但它並沒有解釋捕獲和最終方法，真正把錦上添花。這great article on promises讓我挺直。這裏有一些基於該文章的示例代碼：

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