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

Angular - the offspring of another element

Compilation failure due to Typescript initialization issue

Is it possible to send emails from a local server to Gmail, Yahoo, or Rediff?

Automatically reconstructing local packages when changes occur

Converting the length attribute of a table to a string does not yield any

Why does trying to package a Windows app on OSX prompt a request for Wine installation?

Make sure to verify if all values are contained within an array by utilizing JavaScript or TypeScript

Tips for transitioning from custom CSS to Material UI's CSS in JS

The data returned from the PHP backend appears to be void

How to keep text always locked to the front layer in fabric.js without constantly bringing it to the front

Correcting the invalid syntax due to EOF issue

Exploring the file attributes within nw.js

How can I intercept/manage the back button of the browser in React-router?

guide on adding a variable to the link_to path

What is the best way to delete HTML classes that were generated by a function?

ActivatedRoute not receiving the parameter value

How can Angular 2 effectively keep track of changes in HTTP service subscriptions? Calling the method directly may result in

Utilize inline scripts within the views of Yii2 for enhanced functionality

An error occurred when attempting to run the command npm run compile:sass, displaying the message: npm ERR! missing script:

Is there a way to replicate ajaxStart and ajaxStop functions without using jQuery?