Throttle promises in AngularJS

Question

I have a web app that lets the user select multiple files through a file input. Once the user selects the files, I then upload these files one by one via my rest API. However, in IE, if the user selects lots of files at once (> 10), IE will randomly abort some of the requests (posted a question earlier with no responses here). The only way I can think to fix this, is to throttle these http requests.

for example, if a user selects 20 files, I want to fire off 5 of them at a time. Once all 5 promises are done, start with the next group of 5. Any way to do this?

check this out: http://stackoverflow.com/questions/26596835/how-do-i-throttle-http-requests-in-angularjs — Muli Yulzary, Apr 30 '16 at 01:06

score 0 · Answer 1 · answered Apr 30 '16 at 01:15

Yep, it is possible using promises. I have an example of a function that helps do this in my es6 promise patterns repository, at https://github.com/DukeyToo/es6-promise-patterns#resource-limiter. Unfortunately I don't have a version written for $q, but it should be not-too-hard to translate :)

In your example, it would be used something like this:

var limiter = resourceLimiter(5);
for (var i=0; i<20; i++) {
  limiter.take().then(function() {
    return $http({..do your request .})
  }.then(function(response) {
    limiter.give();
    //.. then do whatever with response
  });
}

Basically, the .take resolves when a resource is available, and uses one of the 5 resources. The .give gives the resource back, and triggers the next .take to resolve. The concept is simple enough, although the resourceLimiter implementation is tricky.

Throttle promises in AngularJS

1 Answers1