Hey there, I have a challenge that involves making a series of AJAX requests to a server and then performing a final request using the data received from the earlier requests. It's essential for me to ensure that the previous requests are completed before initiating the final one, all while maintaining a sequential order to avoid overwhelming the server. Unfortunately, I'm encountering difficulties trying to implement this in JavaScript.
In an attempt to simulate this behavior, I created a simple test script with sleep intervals:
const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay));
var urls = ['1', '2', '3'];
const slowFunc = () => {
urls.forEach(async (url) => {
//Do not modify this section!
console.log("a"+url);
await sleep(5000);
console.log("b"+url); //Need this to execute before c
});
};
slowFunc();
console.log("c");
The current output shows "c" being printed before the sleep is complete, which is incorrect. How can I achieve the desired output?
a1
b1
a2
b2
a3
b3
c
Furthermore, out of curiosity, how would I rearrange the output as follows? (The exact order within the 'a' and 'b' sections doesn't matter.)
a1
a2
a3
b1
b2
b3
c
I attempted to study ES2018: asynchronous iteration, but it proved to be quite challenging.
Update: After reconsidering my example, here is a revised version (which still isn't functioning correctly):
var urls = ['https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.2.0/purify.min.js', 'https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.8.3/system.min.js', 'https://cdnjs.cloudflare.com/ajax/libs/slim-select/1.18.6/slimselect.min.js'];
var results = {};
const webRequest = (url) => {
$.ajax({
type: "GET",
url: url,
}).then(data => {
results[url] = data;
console.log("b"+url+","+results[url]); //I want this to run before c
});
}
const slowFunc = () => {
urls.forEach((url) => {
console.log("a"+url);
webRequest(url);
});
};
slowFunc();
console.log("c");
Thank you for the feedback so far.
Update 2: Here is a solution to the web request problem, inspired by Antonio Della Fortuna's advice:
var urls = ['https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.2.0/purify.min.js', 'https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.8.3/system.min.js', 'https://cdnjs.cloudflare.com/ajax/libs/slim-select/1.18.6/slimselect.min.js'];
var results = {};
const webRequest = (url) => {
return new Promise((resolve, reject) => {
$.ajax({
type: "GET",
url: url,
error: function (data, status, er) {
console.log("b,"+url+",failed");
resolve();
},
}).then(data => {
results[url] = data;
console.log("b,"+url+","+results[url]); //I want this to run before c
resolve();
});
});
}
const slowFunc = async () => {
for (let i = 0; i < urls.length; i++)
{
var url = urls[i];
console.log("a,"+url);
await webRequest(url);
};
};
slowFunc().then(() => {
console.log("c");
console.log(results);
})