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

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

两个 Controller 可能会同时调用该服务，并且可能会得到不同的响应。

Answer 1

Angular 中的所有 $http 调用都会返回一个 promise。

$q 服务没有 Q 的所有功能。它所基于的库，但是如果您查看 docs ，它确实有一个 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;
    });
  };
});