Limiting the number of promises in AngularJS

Question

Limiting the number of promises in AngularJS

My web application allows users to select multiple files using a file input. After the user selects the files, I upload them one by one through my REST API. However, in Internet Explorer, if the user selects more than 10 files at once, some of the requests are randomly aborted (I previously asked a question about this with no responses here). The only solution I can think of is to throttle these HTTP requests.

For instance, if a user chooses 20 files, I would like to send only 5 at a time. Once those 5 requests are complete, I will move on to the next set of 5. Is there any way to accomplish this?

javascript angularjs internet-explorer

Answer 1

Answer №1

A solution using promises is definitely possible. I recently came up with a function to handle this in my repository dedicated to es6 promise patterns, which can be found at https://github.com/DukeyToo/es6-promise-patterns#resource-limiter. While I haven't created a version for the $q library yet, it shouldn't be too difficult to adapt.

In your specific scenario, the usage would be something like the following:

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

Essentially, the .take method resolves when a resource becomes available and utilizes one of the 5 allocated resources. Subsequently, the .give method returns the used resource, prompting the next .take resolution. While the concept may seem straightforward, the actual execution of the resourceLimiter functionality can be quite intricate.

Answer 2

A solution using promises is definitely possible. I recently came up with a function to handle this in my repository dedicated to es6 promise patterns, which can be found at https://github.com/DukeyToo/es6-promise-patterns#resource-limiter. While I haven't created a version for the $q library yet, it shouldn't be too difficult to adapt.

In your specific scenario, the usage would be something like the following:

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

Essentially, the .take method resolves when a resource becomes available and utilizes one of the 5 allocated resources. Subsequently, the .give method returns the used resource, prompting the next .take resolution. While the concept may seem straightforward, the actual execution of the resourceLimiter functionality can be quite intricate.

Limiting the number of promises in AngularJS

Answer №1

Similar questions

creating a loop to handle AJAX requests for JSON data

Steps to launching a URL in a new window on Internet Explorer

Align the inline text at the center as if it were an inline-block element

Looking to retrieve the key value or iteration of a specific item within an Angular UI tree?

Microphone Malfunction: Abrupt End of Input Detected

Live Reload isn't functioning

Tips for swapping out a div tag with another div tag in the same spot without needing to redirect to a different page by utilizing bootstrap

Identifying the user's location within the application and dynamically loading various Angular scripts

Enhance User Experience with a Responsive Website Dropdown Menu

Creating a dynamic display of flash files on a webpage through a unique combination of PHP, AJAX, and

Leveraging jQuery to Avoid Memory Leaks

Issues with incorrect source path in Typescript, Gulp, and Sourcemaps configuration

Newbie's guide: Saving information in Ruby on Rails

Display the child component exclusively after the data has been successfully loaded

Uncovering the key based on the value in MongoDB

Having trouble with creating a new Next.js app using the latest version with npx?

Dynamic menu bar accompanied by primary content

Issues encountered when retrieving images from directory with AngularJS 1.5 and PHP

javascript date.js parsing and sorting an array of objects

EmberJS: Learning how to create a record with a belongsTo relationship