Question

我正在处理页面加载我有2 $http.get()个请求的场景。一个$http.get()独立于另一个$http.get()。一切都运行正常。但在某些情况下，我的第二个$http.get()请求在第一个$http.get()之前执行，我无法获得所需的输出。我们如何链接请求？由于我是AngularJS的新手，所以我没有那么多想法。

$scope.onload = function()
{
    var responsePromise1 = $http.get(1st rest call);
    responsePromise1.success(function(data) { 

        console.log(data.platform.record);
        $scope.records=data.platform.record;
    });

    responsePromise1.error(function(data, status, headers, config) {
        alert("ajax failed");
    });

    var responsePromise2 = $http.get(2nd rest call);
    responsePromise2.success(function(data2) {
        console.log(data2.platform.record);
        $scope.records2=data2.platform.record;
    });

    responsePromise2.error(function(data2, status, headers, config) {
        alert("ajax failed");
    });
}
$scope.butto = function(datafrom1st,datafrom2nd)
{
    var responsePromise3 = $http.get(3rd rest call);
    responsePromise3.success(function(data3) { 
        console.log(data3.platform.record);
        $scope.records3=data3.platform.record;
    });

    responsePromise1.error(function(data3, status, headers, config) {
        alert("ajax failed");
    });
}

<body>
  <div ng-init="onload()">
    <div ng-repeat="record in records">
      {{record.id}}
    </div>
    <div ng-repeat="record2 in records2">
      {{record2.name}}
    </div>
    <button type="button" class="btn btn-primary btn-sm ng-cloak"
            style="padding-bottom:25px;font-weight:bold;" 
            ng-init="butto(record.id,record2.name)">
      {{record3.data}}
    </button>
  </div>
</body>

Answer 1

如果它们彼此独立，您可以尝试使用Promise.all。但是您需要按特定顺序执行代码。

var responsePromise1 = $http.get(1st rest call);
var responsePromise2 = $http.get(2nd rest call);
var promises = [responsePromise1,responsePromise2]

// Array of Promises
$q.all(promises)
    .then(function(data){
         var data1 = data[0];
         var data2 = data[1];
         // Put logic here to handle both responses.
         return $http.get(3rd rest call);
     })
     .then(function(data3){
         // Put logic here to handle third response
     });

Answer 2

在第一次请求的成功方法中调用第二个请求：

var responsePromise1 = $http.get(1st rest call);
        responsePromise1.success(function(data)
        { 
          console.log(data.platform.record);
          $scope.records=data.platform.record;
var responsePromise2 = $http.get(2nd rest call);
        responsePromise2.success(function(data2)
        {
        console.log(data2.platform.record);
        $scope.records2=data2.platform.record;
        });
        responsePromise2.error(function(data2, status, headers, config)
        {
          alert("ajax 2 failed");
        });
        });
        responsePromise1.error(function(data, status, headers, config)
        {alert("ajax failed");
        });

Answer 3

$ http API基于$ q服务公开的延迟/承诺API。

$http
  .get(1st rest call)
  .then(function(data){
       $scope.records = data.platform.record;
       return $http.get(2nd rest call);
  })
  .then(function(result){
     //result of 2nd rest call
  })
  .catch(function(err){
     // Here catch error
  })

Answer 4

尝试这样做

   $scope.onload = function()
    {
    var responsePromise1 = $http.get(1st rest call);
        responsePromise1.success(function(data) { 
    SecondInit()
        console.log(data.platform.record);
            $scope.records=data.platform.record;
        });

        responsePromise1.error(function(data, status, headers, config) {
            alert("ajax failed");
        });


      }
    function SecondInit(){
    var responsePromise2 = $http.get(2nd rest call);
        responsePromise2.success(function(data2) {
            console.log(data2.platform.record);
            $scope.records2=data2.platform.record;
        });

        responsePromise2.error(function(data2, status, headers, config) {
            alert("ajax failed");
        });

这里我试图将第二个api调用绑定到名为SecondInit（）的函数，并在第一次api调用成功时调用它，这可能有帮助

Answer 5

根据Hoyen的建议，您可以使用$q.all实现此目的：

$scope.onload = function(){

    var promise1 = $http.get('/request1');
    var promise2 = $http.get('/request2');

    $q.all([ promise1, promise2 ]).then(function(data){
        var response1 = data[0].platform.record;
        var response2 = data[1].platform.record;

        $scope.records = response1.map(function(e, i){
            var id = e.id;
            var name = response2[i].name;
            return {id: id, name: name};
        });
    });
};

然后在您看来，这样做：

<body>
    <div ng-init="onload()">
        <div ng-repeat="record in records">
            <div>{{record.id}}</div>
            <div>{{record.name}}</div>
            <button type="button" class="btn btn-primary btn-sm ng-cloak" style="padding-bottom:25px;font-weight:bold;" 
                ng-click="butto(record.id,record.name)"></button>
        </div>
    </div>
</body>

这应该可行，但我真的建议你找一个很好的最新角度教程，并阅读最佳实践。这不是解决此类问题的最佳方法。

链接多个$ http.get（）ng-init angularjs

5 个答案: