链接多个 $http.get() ng-init angularjs答案

【问题标题】：Chaining multiple $http.get() ng-init angularjs链接多个 $http.get() ng-init angularjs
【发布时间】：2017-05-10 14:57:37
【问题描述】：

我正在处理页面加载时我有 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>

【问题讨论】：

您的responsePromise1 在responsePromise2 之前执行，但它们都是异步调用，这意味着我们不能保证谁会先完成。如果您需要链接请求，您的responsePromise2 必须在sucess 的responsePromise1 内
如果他们是独立的，你不应该把他们锁起来。
如果它们彼此独立，则使用 Promise All。在 'then' 回调中，它会有两个响应。
使用控制器代替ng-init，使用服务调用API。发布您的 html 和路线以获得更好的答案
见AngularJS $q Service API Reference - Chaining Promises。另见SO: Why are angular $http success/error methods deprecated? Removed from v1.6?。

标签： angularjs angular-promise angularjs-http

【解决方案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
     });

【讨论】：

你能详细解释一下$q.all(promises)
$q.all([]) 返回一个承诺，当所有传递给它的承诺都已解决时，该承诺将解决。所以在这种情况下，当responsePromise1 和responsePromise2 都成功解析时，会调用then 中的函数。如果任何一个通过的承诺失败/被拒绝，$q.all 也会立即被拒绝。如果responsePromise1 和responsePromise2 是真正独立的，我不确定这是否是您想要的，因为如果一个失败，另一个也会失败。
兄弟，我有 3 个 $http.get() 。我希望第一个两个的输出在第三个请求中传递
那么您应该将其包含在您的原始问题中。有点不清楚您要达到的目标。
我怎样才能实现它兄弟。我被困在这个地方

【解决方案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");
        });

【讨论】：

兄弟，但我使用 2 ng-init。一个用于第一个请求，另一个用于第二个请求
什么意思？
我有两个不同的功能。
我认为你应该在success方法中添加第二个init，在这种情况下这个异步方法，所以你需要在第一次成功时调用第二个。
在success方法里面加一个ng-init函数有没有问题，是否被执行？

【解决方案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
  })

【讨论】：

【解决方案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 调用成功时调用它，这可能会有所帮助

【讨论】：

【解决方案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>

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

【讨论】：