AngularJS에서 순차적으로 $ http 요청 실행

Question

내 $scope에 항목 배열이 있습니다. 각 항목에 대해 세 가지 $ http 요청을 실행해야합니다. 이러한 요청은 실패하지 않았는지 여부에 관계없이 특정 순서로 실행되어야합니다. 나는 약속의 패러다임을 가지고 이것을 우아하게하는 방법을 모르겠습니다. 중복 코드가 많아서 혼란스러워 보입니다. 나는이 잘못을해야만한다. 현재 다음과 같은 내용을 가지고 있습니다.

$scope.items = getItems(); 
$scope.currentIndex = 0; 

$scope.executeItem = function() { 
    $http.get($scope.items[$scope.currentIndex].urlA).then(
    function (resA) { 
     $scope.items[$scope.currentIndex].urlAWorks = true; 
     $http.get($scope.items[$scope.currentIndex].urlB).then(
     function (resB) { 
      $scope.items[$scope.currentIndex].urlBWorks = true; 

      $http.get($scope.items[$scope.currentIndex].urlC).then(
      function (resC) { 
       $scope.items[$scope.currentIndex].urlCWorks = true; 
       $scope.currentIndex = $scope.currentIndex + 1; 
       $scope.executeItem(); 
      }, 

      function (errC) { 
       $scope.items[$scope.currentIndex].urlCWorks = false; 
       $scope.currentIndex = $scope.currentIndex + 1; 
       $scope.executeItem(); 
      } 
     ) 
     }, 
     function (errB) { 
      $scope.items[$scope.currentIndex].urlBWorks = false; 
     } 
    ); 
    }, 

    function (errA) { 
     $scope.items[$scope.currentIndex].urlAWorks = false; 
     $http.get($scope.items[$scope.currentIndex].urlB).then(
     function (resB) { 
      $scope.items[$scope.currentIndex].urlBWorks = true; 

      $http.get($scope.items[$scope.currentIndex].urlC).then(
      function (resC) { 
       $scope.items[$scope.currentIndex].urlCWorks = true; 
       $scope.currentIndex = $scope.currentIndex + 1; 
       $scope.executeItem(); 
      }, 

      function (errC) { 
       $scope.items[$scope.currentIndex].urlCWorks = false; 
       $scope.currentIndex = $scope.currentIndex + 1; 
       $scope.executeItem(); 
      } 
     ) 
     }, 
     function (errB) { 
      $scope.items[$scope.currentIndex].urlBWorks = false; 
     } 
    ); 
    } 
); 
}; 

정말 정확하게 약속하고 있습니까? 이것은 꺼져 보인다.

고맙습니다.

Answer 1

매개 변수 바인딩을 사용하여 해당 기능에 대한 참조를 만들면됩니다. 대신

 $http.get($scope.items[$scope.currentIndex].urlC).then(
     function (resC) { 
      $scope.items[$scope.currentIndex].urlCWorks = true; 
      $scope.currentIndex = $scope.currentIndex + 1; 
      $scope.executeItem(); 
     }, 

     function (errC) { 
      $scope.items[$scope.currentIndex].urlCWorks = false; 
      $scope.currentIndex = $scope.currentIndex + 1; 
      $scope.executeItem(); 
     } 
    ) 

할 일의 :

var next_thingy = function (worked) { 
    return function() { 
    $scope.items[$scope.currentIndex].urlCWorks = worked; 
    $scope.currentIndex = $scope.currentIndex + 1; 
    $scope.executeItem(); 
    } 
} 

$http.get($scope.items[$scope.currentIndex].urlC) 
    .then(next_thingy(true),next_thingy(false)); 

그런 그들을 함께 체인 :

var req1 = $http.get(...) 
var thingies = {} 

var thingies.next_thingy = function(worked) { 
    return function() { 
    var req = $http.get(...) 
    ... 
    req.then(thingies.next_thingy2(true),thingies.next_thingy2(false)) 
    } 
} 
req1.then(thingies.next_thingy(false),thingies.next_thingy(true)) 
var thingies.next_thingy2 = function(worked2) { 
    return function() { 
    var req2 = $http.get(...) 
    ... 
    req2.then(thingies.next_thingy3(true),thingies.next_thingy3(false); 
    } 
} 
var thingies.next_thingy3 = function(worked3) { 
    return function() { 
    ... 
    } 
} 

당신은 병렬로 모두를 포크 그들을 마무리 때까지 기다립니다 수 있습니다

var third_reqs = [] 
$scope.items.forEach(function(item) { 
    var third_req_defer = $q.defer() 
    third_reqs.push(third_req_defer.promise) 
    ... 
    var thingies.next_thingy3 = function(worked3) { 
     return function() { 
     ... 
     third_req_defer.resolve() 
     } 
    } 
}) 
$q.all(third_reqs).then(
    function() { $log.log("Finished!")}, 
    function(){ $log.error("some third reqs failed.")}) 

Answer 2

당신은 약속을 사용하지 않습니다 :) .then이 약속을 되 돌리면 다음과 같이 할 수 있습니다.

$http.get(urlA) 
    .then(function(dataA){ 
    DoStuffWithA(dataA); 

    return $http.get(urlB); 
    }) 
    .then(function(dataB){ 
    DoStuffWithB(dataB); 

    return $http.get(urlC); 
    }) 
    .then(function(dataC){ 
    DoStuffWithC(dataC); 

    return true; 
    })