Цепочка нескольких $ http.get() ng-init angularjs

Im работает над сценарием, где при загрузке страницы у меня есть 2 $http.get() запрос. Один $http.get() независимы от другого $http.get(). Все отлично работает. Но в какой-то ситуации мой второй запрос $http.get() выполняется до 1-го $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>

источник

2016-12-26 dockerrrr

Ваш 'responsePromise1' выполняется перед' responsePromise2', но оба они выполняют асинхронизацию вызова, что означает, что мы не можем гарантировать, кто первым закончит. Если вам нужно связать запрос, ваш 'responsePromise2' должен находиться внутри' sucess' 'responsePromise1' – Hereblur

Если они независимы, вы не должны их связывать. –

Если они независимы друг от друга, используйте Promise All. В обратном вызове «then» он будет иметь оба ответа. – Hoyen

Вызов второй запрос в методе успеха 1-го запроса:

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

источник

2016-12-26 03:49:22

bro, но im использует 2 ng-init.One, когда для первого запроса и другого для второго запроса – dockerrrr

, что вы имеете в виду? –

У меня есть две разные функции. – dockerrrr

в $ HTTP API основан на отсроченных APIs/обещание выставляемых $ д службы.

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

источник

2016-12-26 03:58:09

Вы можете попробовать использовать 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 
    });

источник

2016-12-26 04:27:20 Hoyen

вы можете подробнее рассказать о $ q.all (обещания) – dockerrrr

'$ q.all ([])' возвращает обещание, которое решает, когда все обещания, переданные ему, разрешились.Таким образом, в этом случае вызывается функция в 'then', когда оба' responsePromise1' и 'responsePromise2' успешно разрешены. Если какое-либо из принятых обещаний не выполнено/отклонено, '' q.all' также сразу же отклоняется. Если 'responsePromise1' и' responsePromise2' действительно независимы, я не уверен, что это то, что вы хотите, поскольку, если кто-то не работает, другой не работает. –

bro у меня есть 3 $ http.get(). я хочу, чтобы выходные данные 1-го числа прошли в третьем запросе. – dockerrrr

Попробуйте сделать это

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

Здесь я пытаюсь связать второй апи вызов функции с именем SecondInit() и вызывать в нем на успех первого вызова апи это может помочь

источник

2016-12-26 05:26:44

Вы можете достичь этого, используя $q.all согласно предложению Hoyen в:

$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>

Это должно работать, но я бы очень рекомендую вам найти хорошую последнюю дату угловую учебник и прочитать о лучших практиках. Это не самый оптимальный способ решить эту проблему.

источник

2016-12-26 05:34:01

Цепочка нескольких $ http.get() ng-init angularjs

ответ

Смежные вопросы