Question

在为同一视图中所需的数据进行多次API调用时，最好的方法是什么？

例如，您有多个选择框需要包含从应用外部提取的数据，所有这些都在同一视图中。

是否有更优雅的解决方案，而不是简单地在控制器中同时触发它们？如下

app.controller('myCtrl', function($service) { 

   $service.getDataOne().then(function(response) {
      $scope.dataOne = response;
   }, function(error) {
      console.log(error);
   });

   $service.getDataTwo().then(function(response) {
      $scope.dataTwo = response;
   }, function(error) {
      console.log(error);
   })
});

等...每个服务函数执行$ http.get请求。

虽然这有效，但我觉得可能有更优雅的解决方案。

一如既往的任何想法都非常感激。

Answer 1

您可以使用q.all()，因为它接受一系列承诺，只有在所有承诺都已解决后才能解决。

$q.all([
      $service.getDataOne(),
      $service.getDataTwo()
    ]).then(function(data){
      $scope.dataOne = data[0];
      $scope.dataTwo = data[1];
 });

如果您查看该链接，q.All()位于页面的最底部

Answer 2

我相信您正在寻找$ q服务。

http://jsfiddle.net/Zenuka/pHEf9/21/

https://docs.angularjs.org/api/ng/service/ $ Q

function TodoCtrl($scope, $q, $timeout) {
function createPromise(name, timeout, willSucceed) {
    $scope[name] = 'Running';
    var deferred = $q.defer();
    $timeout(function() {
        if (willSucceed) {
            $scope[name] = 'Completed';
            deferred.resolve(name);
        } else {
            $scope[name] = 'Failed';
            deferred.reject(name);
        }
    }, timeout * 1000);
    return deferred.promise;
}

// Create 5 promises
var promises = [];
var names = [];
for (var i = 1; i <= 5; i++) {
    var willSucceed = true;
    if (i == 2) willSucceed = false;
    promises.push(createPromise('Promise' + i, i, willSucceed));
}

// Wait for all promises    
$scope.Status1 = 'Waiting';
$scope.Status2 = 'Waiting';
$q.all(promises).then(
    function() { 
        $scope.Status1 = 'Done'; 
    }, 
    function() { 
        $scope.Status1 = 'Failed'; 
    }
).finally(function() {
    $scope.Status2 = 'Done waiting';
});
}

信用：从未知的小提琴创作者无耻地窃取代码。

Answer 3

如果要为所有下拉列表加载looku pdata，我会进行一次调用，以便在一个有效负载中获取所有查找数据。像这样的东西。每个属性值都是每个下拉列表的项目数组。

{
    "eventMethods": [
        {
            "name": "In Person",
            "id": 1
        },
        {
            "name": "Phone",
            "id": 2
        }
    ],
    "statuses": [
        {
            "name": "Cancelled",
            "id": 42
        },
        {
            "name": "Complete",
            "id": 41
        }
    ]
}

Angular - 多个$ http.get数据请求

3 个答案: