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

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

$q服务并没有它所基于的Q库的所有花俏，但是如果你查看docs，它确实有一个all {1}}方法，可用于为您提供所需的功能。

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

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

Answer 2

使用初始化为您正在进行的通话次数的变量。在AJAX调用的每个回调中，调用一个递减此变量值的函数，如果它为零，则删除微调器。

num_calls = 3;

function considerRemoveSpinner() {
    if (--window.num_calls == 0)
    {
        removeSpinner();
    }

} 

$http.get("url").success(
    function() {
        /* regular handler */
        considerRemoveSpinner();
   }
);

/* other ajax calls */

Answer 3

您可以通过使用拦截器并在每个API的标头中传递一个标志来完成此操作。您只需要执行此操作。在每个$ http调用中添加一个参数。

通过使用属性config.headers。{{Parameter}}在拦截器Request方法中捕获它。在此标志的基础上广播一个事件以显示等待图像。

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

3 个答案: