Restricting concurrent asynchronous $http get requests in Angular程序

Question

Restricting concurrent asynchronous $http get requests in Angular程序

I've set up a page displaying a table of IP addresses connecting to a media stream. I've linked them to a database that includes location information and have managed to serve duplicate IP requests from cache to lighten the load. However, the page crashes with an Error: Insufficient Resources message when too many requests are made simultaneously. I attempted batching using this library, but received a deprecation warning about

Synchronous XMLHttpRequest on main thread

, and it didn't seem to alleviate the issue either. How can I restrict the number of searches performed at once? I don't want to limit it to one at a time as it would be too slow otherwise. Here is the relevant code:

angular.forEach($scope.results, function(conn, key){

    $http.get("addrinfo.cgi?action=get&addr="+conn.ip, { cache: true}) //$scope.results is a list of IP addresses
                    .then(function(ipLocation) {
                        console.log(ipLocation);
                        var locationResults = ipLocation.data; 
                        conn.country = locationResults.country;
                        //... more assignments
                    });
                });

Edit: I'm encountering difficulties implementing Paul's solution. I keep receiving a RequestManager is undefined error. The structure of the code looks like this.

angular.module('ip-module', [
'app.controller',
'app.filter',
'app.factory'
]);

app.controller('ip-analysis', function($scope, $http, $q) { ... })

.filter('customNumFilter', function() { ... })

.factory('RequestManager', ['$http', '$scope', function() { ... 
}]);

javascript ajax angularjs

Answer 1

Answer №1

If you want to efficiently handle multiple requests, consider creating a manager to manage them. This manager can monitor the number of ongoing requests and redirect any excess requests to a queue for later processing. Once a request is completed and there are available slots, the next request from the queue can be executed.

import copy

angular.module('your-module', []) 

.controller('Controller1', function(){
  .... 
}) 

.controller('Controller1', function(){
  .... 
})

.factory('RequestManager', function(){
  var manager = {
    limit: 10,
    queue: [],
    cache: {},
    requests: 0,
    sendRequest: function(conn){
      if(manager.requests < manager.limit){
        if conn.ip in manager.cache.keys():
          conn.update(manager.cache[conn.ip])
        else:
          manager.runRequest(conn);
      }else{
        manager.queue.push(conn);
      }
    },
    runRequest: function(conn){
      manager.requests++;
      $http.get("addrinfo.cgi?action=get&addr="+conn.ip, { cache: true})
        .then(function(ipLocation) {
            console.log(ipLocation);
            var locationResults = ipLocation.data; 
            conn.country = locationResults.country;
            //... more assignments
            manager.cache[conn.ip] = copy.deepcopy(conn) #use deepcopy to make sure the value is not overwritten in the $scope
            runNextRequest();
        }, function(error){
          runNextRequest();
        });
    },
    runNextRequest: function(){
      if(manager.requests > 0){
        manager.requests --;
        if(queue.length > 0){
          manager.runRequest(queue.shift());
        }
      }
    }
  }
  return manager;
}

To implement this in your controller, you can use the following code snippet:

angular.forEach($scope.results, function(conn, key){
  RequestManager.sendRequest(conn);
}

Remember to customize the code according to your needs and test it thoroughly before deployment.

Note: Please proceed with caution as I have not had the opportunity to verify this code for potential errors.

Answer 2

If you want to efficiently handle multiple requests, consider creating a manager to manage them. This manager can monitor the number of ongoing requests and redirect any excess requests to a queue for later processing. Once a request is completed and there are available slots, the next request from the queue can be executed.

import copy

angular.module('your-module', []) 

.controller('Controller1', function(){
  .... 
}) 

.controller('Controller1', function(){
  .... 
})

.factory('RequestManager', function(){
  var manager = {
    limit: 10,
    queue: [],
    cache: {},
    requests: 0,
    sendRequest: function(conn){
      if(manager.requests < manager.limit){
        if conn.ip in manager.cache.keys():
          conn.update(manager.cache[conn.ip])
        else:
          manager.runRequest(conn);
      }else{
        manager.queue.push(conn);
      }
    },
    runRequest: function(conn){
      manager.requests++;
      $http.get("addrinfo.cgi?action=get&addr="+conn.ip, { cache: true})
        .then(function(ipLocation) {
            console.log(ipLocation);
            var locationResults = ipLocation.data; 
            conn.country = locationResults.country;
            //... more assignments
            manager.cache[conn.ip] = copy.deepcopy(conn) #use deepcopy to make sure the value is not overwritten in the $scope
            runNextRequest();
        }, function(error){
          runNextRequest();
        });
    },
    runNextRequest: function(){
      if(manager.requests > 0){
        manager.requests --;
        if(queue.length > 0){
          manager.runRequest(queue.shift());
        }
      }
    }
  }
  return manager;
}

To implement this in your controller, you can use the following code snippet:

angular.forEach($scope.results, function(conn, key){
  RequestManager.sendRequest(conn);
}

Remember to customize the code according to your needs and test it thoroughly before deployment.

Note: Please proceed with caution as I have not had the opportunity to verify this code for potential errors.

Restricting concurrent asynchronous $http get requests in Angular程序

Answer №1

Similar questions

Enhance the list visualization in Next.js by efficiently transferring data from child components

Can anyone recommend a regular expression that would target values ranging from 0.5 to 24?

Implement the Bootstrap datetimepicker functionality for the specified div element

Learning more about the functionality of ui-router, particularly how the ui-sref directive can be used to navigate to

AngularJS extension known as 'ngclipboard'

Is it possible to utilize $(document).ready() within an ASP.NET page?

Monitoring the inclusion of a new item within the database

Exploring methods for obtaining a string from the server following an Ajax request

Create a new storefront JavaScript plugin for Shopware 6 to replace the existing one

Unexpected behavior encountered when using onClick in a material-ui List component containing Buttons

Rails 5 not allow user submission of bootstrap modal form

Underlining.js - Evaluating differences between two arrays containing objects

The <select> element in AngularJS 1.5 is showing the dropdown at unexpected moments, but only on iOS 10 devices

What is the best way to turn my thumbnail into a clickable link while having the title positioned to the right?

JQuery Anchor Link Scrolling Problem on Specific Devices

Tips for making a decision between two different functions

Implementing a JavaScript validator for an ASP textbox

What is the procedure for updating a state property's value?

Layers in leaflet not displaying styles

The utilization of the Angular date pipe significantly impacts the way dates are