javascript - 以 Angular 限制同时异步 $http get 请求

Question

我有一个页面，其中包含连接到媒体流的 IP 地址表。我将它们链接到一个包含位置信息的数据库，并且能够从缓存中提供重复的 ips 请求以减少负载。但是，当一次发出的请求过多时，页面会崩溃并显示 错误:资源不足。我尝试使用 this 进行批处理但是我收到了关于 Synchronous XMLHttpRequest on main thread 的弃用警告，它似乎并没有帮助。如何限制一次搜索的次数？我不想一次将它们限制为一个，否则会花费太长时间。这是相关代码:

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

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

编辑:我在实现 Paul 的回答时遇到了问题。继续获取 RequestManager is undefined 代码结构如下所示。

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() { ... 
}]);

Answer 1

您可以创建一个管理器来处理请求。管理器可以跟踪运行的请求数，一旦达到限制，将多余的请求重定向到队列中。一个请求完成并且有足够的槽后，就可以从队列中取出下一个请求并运行。

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

在你的 Controller 中你可以做类似的事情

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

我不完全确定您如何使用这些值，但您可以调整代码以更恰本地使用它们。

免责声明:我没有时间运行此代码，因此请注意可能出现的错误。