AngularJS中使用$http发送大量请求速度过慢问题排查

嘿，你观察到的这个现象其实挺常见的，咱们一步步拆解背后的原因，以及怎么用你加的拦截器来验证：

核心原因：浏览器同源并发连接限制 #

你看到的“一组请求完成才处理下一组”，本质上不是AngularJS $http的限制，而是浏览器的同源请求并发数限制在起作用。目前绝大多数浏览器（Chrome、Firefox、Edge等）对同一域名的并发HTTP请求数限制在6个左右——超过这个数量的请求会被浏览器自动放入队列，等前面的请求有完成的，才会依次发起下一批。这就造成了“分组处理”的视觉效果。

用你的拦截器验证这个现象 #

你已经加了HTTP拦截器，只需要补充记录请求的发起和完成时间戳，就能清晰看到排队情况。完善后的拦截器代码如下：

angular.module('cnsApp').factory('httpLoggingInterceptor', ['$q', function($q) {
  return {
    // 记录请求发起时间
    request: function(config) {
      if (localStorage.getItem("EnableLogs") != null) {
        const timestamp = new Date().toISOString();
        console.log(`[发起] ${config.url} | ${timestamp}`);
      }
      return config || $q.when(config);
    },
    // 记录请求完成时间
    response: function(response) {
      if (localStorage.getItem("EnableLogs") != null) {
        const timestamp = new Date().toISOString();
        console.log(`[完成] ${response.config.url} | ${timestamp}`);
      }
      return response || $q.when(response);
    },
    // 别忘了错误情况的记录
    responseError: function(rejection) {
      if (localStorage.getItem("EnableLogs") != null) {
        const timestamp = new Date().toISOString();
        console.log(`[失败] ${rejection.config.url} | ${timestamp}`);
      }
      return $q.reject(rejection);
    }
  };
}]);

// 注册拦截器到$httpProvider
angular.module('cnsApp').config(['$httpProvider', function($httpProvider) {
  $httpProvider.interceptors.push('httpLoggingInterceptor');
}]);

打开浏览器控制台，你会看到：

• 前6个请求几乎同时打印「发起」日志
• 当其中某个请求打印「完成」日志后，下一个排队的请求才会打印「发起」日志
  这就直接验证了是浏览器在限制并发数，而非AngularJS主动分组。

可选优化方案（如果业务需要） #

如果这种排队影响了页面性能或加载体验，可以试试这些方法：

• 合并请求：如果多个请求是获取同类数据，和后端沟通提供批量接口，把多个请求合并成一个，减少总请求数
• 启用useApplyAsync：在$httpProvider里配置$httpProvider.useApplyAsync(true)，这个设置会让AngularJS把多个请求完成后的$apply操作合并成一次，减少$digest循环的次数，提升大量请求同时完成时的性能
• 延迟非核心请求：把一些非紧急的请求（比如统计、非关键数据）用$timeout延迟几秒发起，避免和核心请求抢占并发连接

内容的提问来源于stack exchange，提问作者Tal Humy