在多个$ http调用angularJs上显示微调器

Question

这是交易.

我在做一个$ http调用时会显示一个微调器,但问题是我有多个调用,所以我在这里找到的例子没有帮助.

有人有解决方案吗？

一种堆叠调用的方法,以便微调器保持到最后一次调用结束？我希望能说明问题.

我这样做.

angular.module('moduleName', []).
factory.("SomeService", function () {
    return:{
        getResources(params) {
        /* do the $http call */
        }
    }
}).
controller("SomeCtrl", function (SomeService) {
    SomeService.getResources(params)
}).
controller("OtherCtrl", function (SomeService) {
    SomeService.getResources(params)
});

2个控制器可以同时调用服务,可能会得到不同的响应.

Answer 1

$httpAngular中的所有调用都会返回一个承诺.

该$q服务并没有它所基于的Q库的所有花俏,但是如果你看一下这些文档,它确实有一个all方法可以用来为你提供你想要的功能.

以下是您可以使用它的方法:

app.controller('HttpController', function($http, $q) {

  // A hypothetical submit function
  $scope.submit = function() {
    // Set a loading variable for use in the view (to show the spinner)
    $scope.loading = true;

    var call1 = $http.get(/* ... */);
    var call2 = $http.get(/* ... */);
    var call3 = $http.get(/* ... */);

    $q.all([call1, call2, call3]).then(function(responses) {
      // responses will be an array of values the individual
      // promises were resolved to. For this case, we don't 
      // need it, since we only care that they all resolved
      // successfully.

      $scope.loading = false;
    }, function(errorValue) {
      // If any of the promises is rejected, the error callback 
      // will be resolved with that rejection value, kind of like
      // an early exit. We want to mark the loading variable
      // as false here too, and do something with the error.

      $scope.loading = false;
    });
  };
});