Question

我正在我的项目中实现微调器功能。黄金是在触发一个或多个http请求时显示微调器，并在请求成功时隐藏微调器。因为我不知道哪个请求会先解决，所以我选择使用$ q.all。我有这样的指示：

angular.module('myApp', [])
  .directive('spinner', function($q, $http) {
    return {
      controller: function($scope) {
        $scope.showSpinner = true;
        var self = this;
        self.promises = [];

        self.makeHeader = function() {
          self.promises.push($http.get('some/url'));
          // Code that builds header goes here.
        };

        self.makeFooter = function() {
          self.promises.push($http.get('other/url'));
          // Code that builds footer goes here.
        };

        self.makeHeader();
        self.makeFooter();

        // Initial page load
        $q.all(self.promises).then(function() {
          // Hide the spinner.
          $scope.showSpinner = false;
        });
      }   
    }
  });

初始加载工作正常，但是当用户进行需要多次调用服务器的交互时，才能重建页眉和页脚。如何在承诺解决后再次显示微调器并隐藏它？

Answer 1

您可以将重复的调用包装到函数中。我还建议让2个函数返回promise，而不是处理内部的$ http promise以提供更大的灵活性。

angular.module('myApp', [])
  .directive('spinner', function($q, $http) {
    return {
      controller: function($scope) {
        var self = this;

        self.makeHeader = function() {
          return $http.get('some/url').then(function() {
            // Code that builds header goes here.
          });          
        };

        self.makeFooter = function() {
          return $http.get('other/url').then(function() {
            // Code that builds footer goes here.
          }); 
        };

        self.build = function() {
          $scope.showSpinner = true;
          self.promises = [];

          self.promises.push(self.makeHeader());
          self.promises.push(self.makeFooter());

          $q.all(self.promises).then(function() {
            // Hide the spinner.
            $scope.showSpinner = false;
          });
        }

        // initial run
        self.build();

        // subsequent call
        self.someClickHandler = function() {
          self.build();
        }

        // some other calls that need to use spinner
        self.other = function() {
          $scope.showSpinner = true;
          self.promises = [];

          self.promises.push(self.otherCall());

          $q.all(self.promises).then(function() {
            // Hide the spinner.
            $scope.showSpinner = false;
          });
        }
      }   
    }
  });

正如您所看到的，如果您每次都调用相同的函数集，这种方法看起来会更好，但如果您需要在其他情况下使用微调器，例如self.other？

您可以将微调器包装在函数中并将其传递给promise数组。

var showSpinner = function(promises) {
  $scope.showSpinner = true;

  $q.all(promises).then(function() {
    // Hide the spinner.
    $scope.showSpinner = false;
  });
}

self.build = function() {
  var promises = [];

  promises.push(self.makeHeader());
  promises.push(self.makeFooter());

  showSpinner(promises);
}

self.other = function() {
  var promises = [];       
  promises.push(self.otherCall());

  showSpinner(promises);
}

看起来更干净？

使用$ q.all控制Angularjs微调器

1 个答案: