Question

这是我的情景。 Click to see the Image

参考上图。 A，B，C，D是dropBoxes。并且每个框的数据都由http请求加载到页面加载上。并且在成功完成每个请求并将数据加载到dropBoxes（每个drop box具有单独的功能）后，应该启用该按钮。假设每个请求从DB中带来不同大小的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运算符具有处理promise的实用程序。其中一个是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();
})

同步和同时执行角度函数

2 个答案: