Is there a method to delay HTTP requests until the number of pending requests drops below a certain threshold (N)?

Question

Is there a method to delay HTTP requests until the number of pending requests drops below a certain threshold (N)?

I'm in the midst of a project that involves allowing users to upload multiple files simultaneously. However, sending out numerous requests all at once can overwhelm the server and trigger a 429 (Too Many Requests) error for those requests.

Is there a way to prevent a request from being sent out (without affecting the UI) if there are already a certain number of pending requests?

Below is a simplified code snippet to demonstrate what I am currently implementing:

filesToUpload.forEach(function(file) {
    // This function converts the file to base64, prepares the payload,
    // makes a POST request, and returns a promise
    upload(file, successCallback, errorCallback);
}

javascript angularjs ajax

Answer 1

Answer №1

In my opinion, the most effective method would be to wrap the HTTP request in an asynchronous function.

Utilizing the async and await keywords allows for promise-based asynchronous behavior

When using the await keyword, the code will pause until the post request is complete before proceeding with sending another request to the server where the files are stored.

To learn more about the syntax and usage of async and await, you can visit this resource.

Answer 2

In my opinion, the most effective method would be to wrap the HTTP request in an asynchronous function.

Utilizing the async and await keywords allows for promise-based asynchronous behavior

When using the await keyword, the code will pause until the post request is complete before proceeding with sending another request to the server where the files are stored.

To learn more about the syntax and usage of async and await, you can visit this resource.

Answer 3

Answer №2

One way to approach this is by utilizing recursion in a sequential manner. However, it's important to make sure the code can handle potential errors.

(function uploadFilesSequentially(files, successCallback, errorCallback){
    if(files.length){
        upload(files.shift(), (...args) => {
            successCallback(...args);
            uploadFilesSequentially(files, successCallback, errorCallback)
        }, errorCallback);
    }
})(filesToUpload, successCallback, errorCallback);

Answer 4

One way to approach this is by utilizing recursion in a sequential manner. However, it's important to make sure the code can handle potential errors.

(function uploadFilesSequentially(files, successCallback, errorCallback){
    if(files.length){
        upload(files.shift(), (...args) => {
            successCallback(...args);
            uploadFilesSequentially(files, successCallback, errorCallback)
        }, errorCallback);
    }
})(filesToUpload, successCallback, errorCallback);

Answer 5

Answer №3

To handle your situation effectively, consider implementing a loop and a queue.

const UPLOAD_QUEUE = [];
let progress_queue = [];
const MAX_UPLOADS = 5;

throttledUpload();

function throttledUpload() {
    const max = MAX_UPLOADS - progress_queue.length;
    for(let i = 0; i < UPLOAD_QUEUE.length; i++){
        if(i > max) break;
        uploadFile(UPLOAD_QUEUE[i], i);
    }
    progress_queue = progress_queue.concat(UPLOAD_QUEUE.splice(0, max));
}

async function uploadFile(file, idx) {
    try {
        await upload(file, successCallback, errorCallback);
        throttledUpload();
    } catch (err) {
        UPLOAD_QUEUE.push(file);
    } finally {
        progress_queue.splice(idx, 1);
        throttledUpload();
    }
}

Answer 6

To handle your situation effectively, consider implementing a loop and a queue.

const UPLOAD_QUEUE = [];
let progress_queue = [];
const MAX_UPLOADS = 5;

throttledUpload();

function throttledUpload() {
    const max = MAX_UPLOADS - progress_queue.length;
    for(let i = 0; i < UPLOAD_QUEUE.length; i++){
        if(i > max) break;
        uploadFile(UPLOAD_QUEUE[i], i);
    }
    progress_queue = progress_queue.concat(UPLOAD_QUEUE.splice(0, max));
}

async function uploadFile(file, idx) {
    try {
        await upload(file, successCallback, errorCallback);
        throttledUpload();
    } catch (err) {
        UPLOAD_QUEUE.push(file);
    } finally {
        progress_queue.splice(idx, 1);
        throttledUpload();
    }
}

Answer 7

Answer №4

This particular method utilizes traditional callbacks: it allows for a maximum of K concurrent uploads, waiting if necessary. The upload function can be revamped to use Promises.

var filesToUpload = [
  "file1.txt",
  "file2.txt",
  "file3.txt",
  "file4.txt",
  "file5.txt",
  "file6.txt",
  "file7.txt",
  "file8.txt",
]

function upload(filename, callback) {
  // This function converts the specified file to base64,
  // prepares the payload, sends a POST request, and returns a promise
  setTimeout(function() {
    console.log("<!-- uploaded " + filename);
    typeof callback === 'function' && callback()
  }, Math.random() * 1000 + 500)
}


function start_sequence(filesToUpload, maxK, callback) {
  var K = maxK;

  function do_loop(filesToUpload, callback) {

    if (!filesToUpload.length) {
      if (K == maxK) {
        // End the loop
        typeof callback === 'function' && callback();
      }
      return;
    }

    // Upload the first K files now
    while (K > 0) {
      K--
      var first = filesToUpload.shift();
      console.log("--> sending " + first);
      upload(first, function() {
        K++;
        do_loop(filesToUpload, callback)
      });
    }
  }

  // Start the loop
  do_loop(filesToUpload, callback);

}


start_sequence(filesToUpload, 3, function() {
  console.log("all done!")
});

.as-console-wrapper {
  max-height: 100% !important;
  top: 0;
}

Answer 8

This particular method utilizes traditional callbacks: it allows for a maximum of K concurrent uploads, waiting if necessary. The upload function can be revamped to use Promises.

var filesToUpload = [
  "file1.txt",
  "file2.txt",
  "file3.txt",
  "file4.txt",
  "file5.txt",
  "file6.txt",
  "file7.txt",
  "file8.txt",
]

function upload(filename, callback) {
  // This function converts the specified file to base64,
  // prepares the payload, sends a POST request, and returns a promise
  setTimeout(function() {
    console.log("<!-- uploaded " + filename);
    typeof callback === 'function' && callback()
  }, Math.random() * 1000 + 500)
}


function start_sequence(filesToUpload, maxK, callback) {
  var K = maxK;

  function do_loop(filesToUpload, callback) {

    if (!filesToUpload.length) {
      if (K == maxK) {
        // End the loop
        typeof callback === 'function' && callback();
      }
      return;
    }

    // Upload the first K files now
    while (K > 0) {
      K--
      var first = filesToUpload.shift();
      console.log("--> sending " + first);
      upload(first, function() {
        K++;
        do_loop(filesToUpload, callback)
      });
    }
  }

  // Start the loop
  do_loop(filesToUpload, callback);

}


start_sequence(filesToUpload, 3, function() {
  console.log("all done!")
});

.as-console-wrapper {
  max-height: 100% !important;
  top: 0;
}

Is there a method to delay HTTP requests until the number of pending requests drops below a certain threshold (N)?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Selecting elements by their name using vanilla JavaScript

Changing the order of element names depending on their location within the parent element using jQuery

Is it possible to add items to a JS object that isn't an array?

Using JSON to pass a dynamic array to Morris Chart

When attempting to make a GET request, Express/Mongoose is returning a null array

Adjusting the width of a nested iframe within two div containers

When emitting events in Vue.js, they do not automatically bubble up to higher level parent or grandparent elements

The basket_add function in basket.views did not generate an HttpResponse object, but instead returned a None value

Is there an issue with loading CSS and JavaScript in mobile view on a website built with CodeIgniter?

Explore the wonders of generating number permutations using JavaScript recursion!

The success variable is not functioning properly in the Statamic Antlers template when attempting to submit a form via AJAX

What causes errors in jQuery ajax jsonp requests?

Utilizing AngularJS: Employing the $q Promise Feature to Await Data Readiness in this Scenario

Determine the position and quantity of elements in jQuery by comparing their IDs with the current page or element

Error message notifying user that an index is not defined in an ajax

Incorporate an additional form into every view

How can I properly integrate multer with Node and Express in this situation?

"Utilizing the usePrevious hook in React: A step-by-step

Refreshing web pages using AJAX

Tips for ensuring elements within a modal receive immediate focus when opened in Angular 2