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

Manipulating object information within a nested for loop

Safari's Web Audio API suffering from subpar performance and various shortcomings

Is there a way to dynamically access BEM-style selectors using CSS modules?

How can I troubleshoot the overflow-y problem in a tab modal from w3 school?

Using jQuery to send a POST request with a data object

Node.js: Steps for receiving an ArrayBuffer in a $http request

Automatically activate the Focus Filterfield in the ng-multiselect-dropdown upon clicking

Processing ajax requests in Rails 4 using HTML format

Encountering the "potential null object" TypeScript issue when utilizing template ref data in Vue

Having trouble sending Props between components within a specific route as I keep receiving undefined values

Retrieve dashboard configurations in AngularJS by making an $http request prior to initiating the dashboard controller

Performing an ajax post call within the WordPress platform

The div element is not adjusting its size according to the content it

Issue encountered while attempting to set up react-native project

Exploring the Functionality of Cookies in Nuxt 3 API Endpoints and Middlewares

The ComboBox is incorrectly displaying a value after the initial load

Automatically close the menu in ReactJS when transitioning to a new page

Processing two Array Objects can be achieved without resorting to the EVAL function

Generating dynamic strings for identifiers in JSX

Having trouble with Vue Router view not functioning properly in my Laravel Blade page