jquery - 複数の ajax リクエストの角度: アクティブな数を 10 に制限します

Question

複数の ajax リクエストを行う角度のあるアプリを開発しています。

すでにアクティブなリクエストが 10 個ある場合はリクエストをタイムアウトにしたいので、アクティブなリクエストが 10 個を超えることはありません。

どうすればこれを作ることができますか？angularJsのajaxStart()メソッドに似ていますか?

または、$window でグローバル var を作成し、ajax リクエストを追加または削除する必要がありますか?

@マイクPこのようなもの：

$http.post("/foo/bar", requestData,
    transformRequest: transform
})

transform = function(data){
    if($window.counter > 10){
        setTimeout(1000);
    }else{
        return data;    
    }
}

score 3 · Accepted Answer

AngularJS 1.1.5 (これは不安定なリリースと見なされます) は、リクエストインターセプターとレスポンスインターセプターの両方をサポートします。概念は、angular-http-auth インターセプターモジュール ( https://github.com/witoldsz/angular-http-auth )を介して行われていることと非常によく似ています。

次の http-throttler サービスをコードに挿入して、HTTP 要求を調整できます。アプリを定義するときに Angular に接続します。

例：

angular.module('myApp', ['http-throttler'])
       .config(['$routeProvider','$httpProvider', function($routeProvider, $httpProvider) {
                 $httpProvider.interceptors.push('httpThrottler');
                 $routeProvider.
                        when('.............your stuff here..........')
                        ...........more of your stuff....
       });

これを http-interceptor.js に入れて、アプリケーションに含めます。

(function() {
   "use strict";  angular.module('http-throttler', ['http-interceptor-buffer']).factory("httpThrottler", ['$q', '$log', 'httpBuffer', function($q, $log, httpBuffer) {
  var reqCount, service;

  reqCount = 0;
  service = {
    request: function(config) {
      var deferred;

      $log.info("Incoming Request - current count = " + reqCount);
      if (reqCount >= 10) {
        $log.warn("Too many requests");
        deferred = $q.defer();
        httpBuffer.append(config, deferred);
        return deferred.promise;
      } else {
        reqCount++;
        return config || $q.when(config);
      }
    },
    response: function(response) {
      $log.info("Response received from server");
      reqCount--;
      httpBuffer.retryOne();
      return response || $q.when(response);
    }
  };
  return service;
}
]);

  angular.module('http-interceptor-buffer', []).factory('httpBuffer', [
'$log', function($log) {
  var buffer, retryHttpRequest, service;

  buffer = [];
  retryHttpRequest = function(config, deferred) {
    if (config != null) {
      $log.info("Resolving config promise");
      return deferred.resolve(config);
    }
  };
  service = {
    append: function(config, deferred) {
      return buffer.push({
        config: config,
        deferred: deferred
      });
    },
    retryOne: function() {
      var req;

      if (buffer.length > 0) {
        req = buffer.pop();
        return retryHttpRequest(req.config, req.deferred);
      }
    }
  };
     return service;
   }
 ]);

}).call(this);

上記では、質問ごとに 10 にハードコーディングされています。他の人が役に立つと思った場合に備えて、これを構成可能にして GitHub にプッシュするかもしれません。

繰り返しますが、これは AngularJS の 1.0.7 リリースでは機能しません。これは、1.0.7 が $httpProvider の新しいインターセプター配列をサポートしていないためです。responseInterceptors のみをサポートします。1.1.4 は試していませんが、1.1.5 ではうまく機能するようです。

コードは GitHub @ https://github.com/mikepugh/angular-http-throttlerで入手可能