This content originally appeared on Level Up Coding - Medium and was authored by Wendie Sun
The Problem
There is a bulk edit feature where the user can multi-select a few records and edit all of them at the same time.
However when updating 50+ records at once, it can take up to 50 seconds and the page freezes. The users were confused during the wait and often left the page early. We want to make it faster.
Why the Slowness
The code was written like this:
for (r in records) {
await update(r);
}Updating one record makes an API call that takes 500ms to 1s.
And since it iterates over the records and updates them one by one, the time goes up linearly as there are more records to be updated.
Using Promise to Speed Up
Fortunately we don’t have to wait for one update to finish before we process the next one. Promise.all allows us to make the next update request before the previous one finishes.
This is what we did:
const allPromises = [];
for (r in records) {
const promise = update(r);
allPromises.push(promise);
};await Promise.all(allPromises);
Visually this is what happened when using async/await v.s. using promises:
As we can see, since we are not waiting for each update request to return before making the next one, it saves lots of time.
Be Careful — Promise.all() Is All or Nothing
One thing to keep in mind is that Promise.all(allPromises) only resolves after all promises are resolved.
This means if any of the promises are rejected, await Promise.all(allPromises) will throw an error.
This is not the behaviour I want. In my case, I want to know which records were updated successfully, even if some of them failed.
To achieve this, we used .then and .catch to make sure the update promises resolve no matter what.
To tell the outcome, we made it resolve to its id if succeeded, and null if not.
This way we were able to get the ids of the successfully updated records:
const allPromises = [];
for ( r in records) {
const promise = new Promise((res, rej) => {
update(t)
.then(() => { res(r.id) }); # succeed
.catch(err => { res(null) }); # failed
});
promiseList.push(promise);
};let results = await Promise.all(allPromises);
results = results.map(r => r!==null);
Note that in your case you might want to use something that suits your requirement.
Visually this is what happened now if some of the update requests failed:
And we were able to use the returned array to tell which records were updated successfully.
That’s it! We were able to reduce a bulk edit operation of 50+ records from 50+ seconds to less than 5 seconds with this change. 💪
Thanks for Reading!
I hope this is clear and helpful. If you have any questions please don’t hesitate to leave a comment.
Thanks for your time!
Changing Async/Await to Promises.all to Speed Up API Calls in Node.JS was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Level Up Coding - Medium and was authored by Wendie Sun
Wendie Sun | Sciencx (2022-03-30T18:52:08+00:00) Changing Async/Await to Promises.all to Speed Up API Calls in Node.JS. Retrieved from https://www.scien.cx/2022/03/30/changing-async-await-to-promises-all-to-speed-up-api-calls-in-node-js/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.