Show spinner on multiple $http calls angularJs

问题:

This is the deal.

I what to show a spinner when doing a $http call, but the problem here is that I have multiple calls at ones, so the examples I found here didn't help.

Did anyone have a solution for this?

A way to stack the calls so the spinner remains until the last call finish? I hope to make my point.

Im doing this.

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

The 2 controllers may call the service at the same time and the may get diferent responce.

回答1:

All $http calls in Angular return a promise.

The $q service doesn't have all the bells and whistles of the Q library, which it is based, but if you look at the docs, it does have an all method that can be used to give you the functionality you want.

Here's how you could use it:

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

回答2:

Use a variable that is initialized to the number of calls you are making. In each of the callbacks for the AJAX calls, call a function that decrements the value of this variable and if it's zero, removes the spinner.

num_calls = 3;

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

} 

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

/* other ajax calls */

回答3:

You can do this by using interceptor and passing one flag in the header of each API.What all you need to do it.Add one parameter in each $http call.

Than capture it in the interceptor Request method by using property config.headers.{{Parameter}}.On the basis of this flag broadcast one event for showing wait image.