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 - 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. allows us to make the next update request before the previous one finishes. Promise.all This is what we did: allPromises.push(promise);
}; const allPromises = []; for (r in records) { const promise = update(r); await Promise .all(allPromises); Visually this is what happened when using v.s. using : async/await 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 . only resolves after all promises are resolved Promise.all(allPromises) This means if any of the promises are rejected, will throw an error. await Promise.all(allPromises) 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 and to make sure the update promises resolve no matter what. .then .catch To tell the outcome, we made it resolve to its if succeeded, and if not. id null This way we were able to get the ids of the successfully updated records: update(t) });
    promiseList.push(promise);
}; const allPromises = []; for ( r in records) { const promise = new Promise ( ( res, rej ) => { .then( () => { res(r.id) }); # succeed .catch( err => { res( null ) }); # failed 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 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!

Keep

Mind

AWS Step Function: Adding Retries and Error Notifications To A Lambda Function

Changing Async/Await to Promises.all to Speed Up API Calls in Node.JS

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

AWS Step Function: Adding Retries and Error Notifications To A Lambda Function

An Overview of Server Side and Isomorphic Async Rendering

Asynchronous Javascript For Beginners

Exploring Differences Between Promises And Callbacks in JavaScript

Five Architectures You Can Quickly Prototype on PaaS

Is JavaScript a Single Threaded Language?

AWS Step Function: Adding Retries and Error Notifications To A Lambda Function

An Overview of Server Side and Isomorphic Async Rendering

Asynchronous Javascript For Beginners

Exploring Differences Between Promises And Callbacks in JavaScript

Five Architectures You Can Quickly Prototype on PaaS

Is JavaScript a Single Threaded Language?

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps