Determining when all $http requests have completed in AngularJS

Question

Determining when all $http requests have completed in AngularJS

After running multiple $http calls, I need to trigger an event only when all of them have been processed. Additionally, I must be informed if any call has failed along the way. Despite attempting solutions found on stackoverflow, such as using an interceptor, I faced some issues.

angular.module('app').factory('httpInterceptor', ['$q', '$rootScope',
  function ($q, $rootScope) {
    var loadingCount = 0;

    return {
      request: function (config) {
        if(++loadingCount === 1) {
          $rootScope.$broadcast('loading:progress');
        }
        return config || $q.when(config);
      },    
      response: function (response) {
        if(--loadingCount === 0) {
          $rootScope.$broadcast('loading:finish');
        }
        return response || $q.when(response);
      },    
      responseError: function (response) {
        if(--loadingCount === 0) {
          $rootScope.$broadcast('loading:finish');
        }
        return $q.reject(response);
      }
    };
  }
]).config(['$httpProvider', function ($httpProvider) {
  $httpProvider.interceptors.push('httpInterceptor');
}]);

One downside of this approach is that the

$rootScope.$broadcast('loading:finish')

is triggered after each $http call completion rather than after all calls are done. My aim is to have the event fired only once all $http calls have finished.

My constraint lies in not being able to utilize $q since the $http calls within my page originate from different directives and are not confined to a single controller.

javascript angularjs http

Answer 1

Answer №1

If you need to monitor the number of pending requests for $http, you can utilize the following code snippet. In my own project, I implemented this feature to display a loading spinner.

$http.pendingRequests.length

To keep track of both successful and failed calls, consider implementing something similar to the code below:

angular.module('myApp', [])
.run(function ($rootScope){
  $rootScope.failedCalls = 0;
  $rootScope.successCalls = 0;
 })
.controller('MyCtrl', 
function($log, $scope, myService) {
 $scope.getMyListing = function(employee) {
   var promise = 
       myService.getEmployeeDetails('employees');
   promise.then(
      function(payload) { 
          $scope.listingData = payload.data;
          $rootScope.successCalls++; //Counter for success calls
      },
      function(errorPayload) {
        $log.error('failure loading employee details', errorPayload);
        $rootScope.failedCalls++; //Counter for failed calls
      });
 };
 })
 .factory('myService', function($http) {
  return {
  getEmployeeDetails: function(id) {
     return $http.get('/api/v1/employees/' + id);
  }
}
 });

In essence, I have established two root scope variables to act as counters for tracking the number of successful and failed calls. Feel free to integrate and use these counters in your application as needed.

Answer 2

If you need to monitor the number of pending requests for $http, you can utilize the following code snippet. In my own project, I implemented this feature to display a loading spinner.

$http.pendingRequests.length

To keep track of both successful and failed calls, consider implementing something similar to the code below:

angular.module('myApp', [])
.run(function ($rootScope){
  $rootScope.failedCalls = 0;
  $rootScope.successCalls = 0;
 })
.controller('MyCtrl', 
function($log, $scope, myService) {
 $scope.getMyListing = function(employee) {
   var promise = 
       myService.getEmployeeDetails('employees');
   promise.then(
      function(payload) { 
          $scope.listingData = payload.data;
          $rootScope.successCalls++; //Counter for success calls
      },
      function(errorPayload) {
        $log.error('failure loading employee details', errorPayload);
        $rootScope.failedCalls++; //Counter for failed calls
      });
 };
 })
 .factory('myService', function($http) {
  return {
  getEmployeeDetails: function(id) {
     return $http.get('/api/v1/employees/' + id);
  }
}
 });

In essence, I have established two root scope variables to act as counters for tracking the number of successful and failed calls. Feel free to integrate and use these counters in your application as needed.

Determining when all $http requests have completed in AngularJS

Answer №1

Similar questions

The value control input does not get properly updated by ngModelChange

Is it possible for an AJAX request to return both HTML data and execute callback functions simultaneously?

Retrieve and manipulate custom headers from a webview within an AngularJS app

Date selection tool in Bootstrap showing blank field

Jquery is failing to handle multiple inputs

Utilize date-fns to style your dates

Assign the appropriate label to the HTML checkbox based on the value obtained from the function

What could be the reason for Object.assign failing to update a key in my new object?

Executing an Ajax callback function to navigate to a different page

Making jQuery work: Utilizing tag replacements

Increased wait time during initial execution

Using HTML tags with AngularJS's limitTo function

Is there a way for me to view the properties within the subcomponents?

What is causing my Fabric.js canvas to malfunction?

What is the best way to ensure that my theme button changer has an impact on all pages throughout my website, not only on the

Scroll through the menu with ease

Exploring ways to retrieve nested values from JSON data using the Instagram API and Javascript

The issue arises when the d3 startAngle and endAngle values are set to NaN, resulting in an

Any recommendations for building HTML in an iOS UIWebView?

Running a child process within a React application