同步和同时执行角函数

Question

在这里，这是我的场景。 点击查看图片

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

正如我对Angular的了解一样，我非常期待并欣赏您的回答和专业实践。

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

Answer 1

您将需要使用$q.all()并传递您的诺言数组。 每个人还是会独立解决，而一旦他们都解决了.then()在你的$q.all()将解决。 在这里，我模拟了一个工作示例，该示例在等待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> 

Answer 2

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