JavaScript - Make API calls asynchronously in a loop - (Promises, Async/Await)
There maybe a chance where you want to tackle a situation which involves to make api calls in a loop.
Srivastava Bodakunti
Hi there, in this blog post we will discuss on how to make async operations over and over again in JavaScript.
As a front end developr, there might be situations where you want to make api calls continuously like deleting multiple users at once or any other kind of operation at a time with a single button click. To do this operation you may have many approaches e.g. in a recursive way or loop.
And we can take advantage of the Async/Await pattern. Basic async and await is simple. Things get more complicated when you use loop to do async operations in the body. Normal loop along with your api calls won't work, because it is sync. Your async task is sync, the loop will finish before the async task can even respond. So, we need to use Promises to manage async tasks. Promises do state managment of async operations. In languages like Java or Python, this is not something you need to worry about.
Before you begin, this blog post asssumes you knew how to use async and await. If you are not aware of it, I suggest you to checkout this.
Approach 1: Using for..of loop
We will use a for of loop and use a generator function for maintaining a completed state. Here's a simple example where the for of loop will wait for the async function until we've had 5 iterations and then done is flipped to true. You should be able to update this concept to set your done variable to true when your webservice calls have buffered all of your data rows.
let done = false;
let count = 0;
const whileGenerator = function* () {
while (!done) {
yield count;
}
};
const asyncFunction = async () => {
await new Promise(resolve => {
setTimeout(resolve); // your API call goes here...
});
};
const main = new Promise(async (resolve) => {
for (let i of whileGenerator()) {
console.log(i);
await asyncFunction();
count++;
if (count === 5) { // check for your condition
done = true;
}
}
resolve();
});
main.then(() => {
console.log('all done!');
});Approach 2: Using recursion
You can use a promise to control the flow of your application and use recursion instead of for of loop.
const asyncFunction = (time) => new Promise(resolve => setTimeout(resolve, time)); // place your api call instead of setTimeout
const getData = async (resolve, reject, count) => {
console.log('waiting');
await asyncFunction(3000);
console.log('finished waiting');
count++;
if (count < 2) { // check for your condition
await getData(resolve, reject, count);
} else {
return resolve();
}
}
const runScript = async () => {
await new Promise((resolve, reject) => getData(resolve, reject, 0));
};
runScript().then(r => console.log('Done!'));That's it, you could now make n number of api calls with the above approaches.
