同步和同时执行角函数

Question

这里，这是我的方案。 Click to see the Image

请参考上面的图片。 A，B，C，D是dropBoxes。并且每个框的数据都通过http请求加载到页面加载上。并且，在成功完成每个请求并将数据加载到dropBoxes（每个拖放框具有单独的功能）后，应启用该按钮。假设每个请求都会从数据库中获取不同大小的dataBulk。所以，我想知道的是， - 我如何跟踪每个dropBox是否已成功加载或不启用按钮？

由于我是Angular的小说，对此非常期待和欣赏你的回答和专业实践。

注：函数可以独立使用，是必须的！我正在使用angularJs 1.x

Answer 1

$q运营商有公用事业处理承诺。其中之一是all()函数，它在调用函数之前等待数组中的所有promise。像这样：

var promiseA = $http.get('url1').then(function(response) { 
    $scope.dataA = response.data 
}); 
var promiseB = $http.get('url2').then(function(response) { 
    $scope.dataB = response.data 
}); 
var promiseC = $http.get('url3').then(function(response) { 
    $scope.dataC = response.data 
}); 
var promiseD = $http.get('url4').then(function(response) { 
    $scope.dataD = response.data 
}); 

$q.all([promiseA, promiseB, promiseC, promiseD]).then(function() { 
    enableButton(); 
}) 

Answer 2

您需要使用$q.all()并传入您的承诺数组。每个人仍然会独立解决，一旦他们全部解决了，您的$q.all()上的.then()将解决。在这里我嘲笑了一个工作示例，它在等待1,2或5秒后才返回字符串数据。

angular.module('app', []) 
 
    .service('dataService', function($q, $timeout) { 
 
    var service = {}; 
 
    service.getData1 = function() { 
 
     var deferred = $q.defer(); 
 
     $timeout(function() { 
 
     deferred.resolve("getData1 resolved"); 
 
     }, 1000); 
 
     return deferred.promise; 
 
    }; 
 
    service.getData2 = function() { 
 
     var deferred = $q.defer(); 
 
     $timeout(function() { 
 
     deferred.resolve("getData2 resolved"); 
 
     }, 2000); 
 
     return deferred.promise; 
 
    }; 
 
    service.getData3 = function() { 
 
     var deferred = $q.defer(); 
 
     $timeout(function() { 
 
     deferred.resolve("getData3 resolved"); 
 
     }, 5000); 
 
     return deferred.promise; 
 
    }; 
 
    return service; 
 
    }) 
 
    .controller('ctrl', function(dataService, $q) { 
 
    var svcCall1 = dataService.getData1().then(function(data) { 
 
     console.log(data); 
 
    }); 
 
    var svcCall2 = dataService.getData2().then(function(data) { 
 
     console.log(data); 
 
    }); 
 
    var svcCall3 = dataService.getData3().then(function(data) { 
 
     console.log(data); 
 
    }); 
 

 
    $q.all([svcCall1, svcCall2, svcCall3]).then(function() { 
 
     console.log("all getData calls completed"); 
 
    }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="ctrl as vm"> 
 
</div>