Tips for effectively running multiple XMLHttpRequests in a loop

Question

Tips for effectively running multiple XMLHttpRequests in a loop

While running XMLHttpRequest inside .map(), everything operates smoothly.

   list.map(function(file) {
     const xhr = new XMLHttpRequest();
     xhr.onreadystatechange = function () {}
     xhr.onerror = function () {}
     xhr.upload.addEventListener('progress', (e) => {}
     xhr.send(file);
   }

The issue lies in the fact that this loop initiates all xhr.send() calls at the same time.
What measures should I take to ensure these iterations happen sequentially?
How can I make sure one request completes before the next one starts?

javascript ajax xmlhttprequest

Answer 1

Answer №1

In the realm of asynchronous programming, one question has stood the test of time, compelling developers to explore a multitude of innovative solutions.

Currently, functional programming is all the rage, offering a range of clever techniques. Let me unveil a few tricks that enable you to sequence any collection of asynchronous tasks for sequential execution.

To begin with, opt for using fetch() over XMLHttpRequest. Then, harness methods such as apply, compose, and thunking in the following manner:

const urls = ['https://www.example.com', 'https://blog.sample.org'];

let progress = 0;

const fetchHtml = url => {
  return fetch(url).then(resp => resp.text());
};

const updateProgressbar = (html) => {
  console.log('Updating progress bar!');
  return ++progress/urls.length;
};

const thunk = (f, ...args) => () => f(...args);
const apply = (acc,val) => acc.then(val);
const compose = (...funcs) => x => funcs.reduce(apply, Promise.resolve(x));
const sequence = (f, inputs) => compose(...inputs.map(input => thunk(f, input)))();

sequence(compose(fetchHtml, updateProgressbar, console.log), urls);

Answer 2

In the realm of asynchronous programming, one question has stood the test of time, compelling developers to explore a multitude of innovative solutions.

Currently, functional programming is all the rage, offering a range of clever techniques. Let me unveil a few tricks that enable you to sequence any collection of asynchronous tasks for sequential execution.

To begin with, opt for using fetch() over XMLHttpRequest. Then, harness methods such as apply, compose, and thunking in the following manner:

const urls = ['https://www.example.com', 'https://blog.sample.org'];

let progress = 0;

const fetchHtml = url => {
  return fetch(url).then(resp => resp.text());
};

const updateProgressbar = (html) => {
  console.log('Updating progress bar!');
  return ++progress/urls.length;
};

const thunk = (f, ...args) => () => f(...args);
const apply = (acc,val) => acc.then(val);
const compose = (...funcs) => x => funcs.reduce(apply, Promise.resolve(x));
const sequence = (f, inputs) => compose(...inputs.map(input => thunk(f, input)))();

sequence(compose(fetchHtml, updateProgressbar, console.log), urls);

Tips for effectively running multiple XMLHttpRequests in a loop

Answer №1

Similar questions

What is the best way to handle a JSON arraylist in a Node.js environment?

Express Session doesn't remove the variable assigned

Sending a variable from the server to the client using express rendering in Node.js

Executing JavaScript code within a class object using ASP-VB

Is it possible to send an ajax request to a user control file with the extension .ascx?

What might be causing the issue with my ajax request to the PHP file within the data parameter?

Limiting the quantity in SimpleCart (js)

Display the contents of a <div> tag from one HTML file onto another HTML file

Modify the data in a JSON array and receive the revised array using JavaScript

NodeJS encountered a SyntaxError while trying to export the 'routes' object as

mention a numerical value/heading within a JSON list

Best practice for retrieving the $scope object inside the ng-view directive

The MongoDB query isn't functioning properly as the Match operation is returning an array with no elements

Adding a clickable button to execute code within a LeafletJS marker!

Is there a way to extract the query string from a file in order to query the database using ExpressJS?

Once data has been received using @requestbody, I aim to either send a message or initiate a webpage redirection

Assign the physics settings to a variable within the A-frame

jQuery toggle buttons to show or hide on radio button selection

JavaScript now has Type Inference assistance

Tips for organizing Protractor promises