--- title: "Then vs Async Await in LWC" url: "https://blog.beyondthecloud.dev/blog/then-vs-async-await-in-lwc" author: "Piotr Gajek" published: "2023-02-13" updated: "2025-02-27" tags: "async in lwc, await lwc, await vs then lwc, lwc promise, then lwc" --- # Then vs Async Await in LWC By [Piotr Gajek](https://blog.beyondthecloud.dev/author/piotr-gajek.md), February 13, 2023 Hi there! 👋 This post expands on the topic of [Promises in LWC](https://beyondthecloud.dev/blog/promises-in-lwc-lightning-web-components). JavaScript offers `then` and `await` as tools for managing asynchronous code. The `then` keyword is used with Promises and allows you to specify what should happen after a Promise is fulfilled. On the other hand, the `await` keyword can only be used within an asynchronous function and suspends the execution of the function until the specified Promise is resolved. In this post, we’ll dive deeper into the usage and benefits of `then` and `await` in JavaScript. Let’s begin! ## Then vs Await `then/catch` and `async/await` are very similar. Both are used to resolve the **Promise**. ![javascript promise](https://wordpress.beyondthecloud.dev/wp-content/uploads/2022/09/h3o8Po7q0GDc.png) What are the differences? * With `await` JavaScript will pause the function execution until the promise settles (resolve, reject). In short: asynchronous code behaves like synchronous. ```js function myPromiseFunction() { return new Promise((resolve, reject) => { setTimeout(() => { resolve('Success'); }, 2000); }); } (async () => { console.log('Start'); const result = await myPromiseFunction(); console.log(`result - ${result}`); console.log('End'); })(); // Output // Start // result - Success // End ``` * With `then` the rest of the function will continue to execute, but JavaScript won’t execute the `then()` callback until the promise settles (resolve, reject). ```js function myPromiseFunction() { return new Promise((resolve, reject) => { setTimeout(() => { resolve('Success'); }, 2000); }); } (() => { console.log('Start'); myPromiseFunction() .then(result => { console.log(`result - ${result}`); }) .catch(error => { console.error(error); }) console.log('End'); })(); // Output // Start // End // result - Success ``` ## Promises Everywhere Where we can find promises? ### Apex Method returns a Promise The apex method returns a Promise. ```js import apexMethodName from '@salesforce/apex/Namespace.Classname.apexMethodReference'; // Then/Catch apexMethodName .then(result => { console.log(result); }) .catch(error => { console.error(error); }); // Async/Await try { const result = await apexMethodName(); } catch(error) { console.error(error); } ``` ### Async The `async` method returns a Promise. ```js async function myAsyncFunction() { return 'hello async promise!'; } // Then myAsyncFunction() .then(result => console.log(result)); // Await const result = await myAsyncFunction(); ``` ### Then `then` return a Promise. > It immediately returns an equivalent Promise object, allowing you to chain calls to other promise methods. \~ MDN Web Docs Each call to `then()` creates another step in the Promise chain, and if there’s an error at any point in the chain, the next `catch()` block will be triggered. ```js function myPromiseFunction() { return new Promise((resolve, reject) => { setTimeout(() => { resolve('Success'); }, 2000); }); } function myThenFunction() { return myPromiseFunction() .then(result => { return result; }); } // Then myThenFunction() .then(result => console.log(result)); // Await const result = await myThenFunction(); ``` ## Best practices ### Do Not Combine Then And Await As you know for the previous paragraphs `then\catch` and `async\await` are used to resolve Promises. You also know that `then` and `async` return a Promise. So? We can combine `then\catch` and `async\await` and we can do something like that: ```js await myPromise().then(result => { console.log(result); }); ``` Let’s add some context here: ❌❌❌ ```js function myPromise() { return new Promise((resolve, reject) => { setTimeout(() => { resolve('Success'); }, 2000); }); } async function myFun() { return await myPromise().then(result => { console.log(result); }); } myFun(); ``` It works! 🥳 But does it mean that, it is correct? **No.** **You should NOT combine then/catch and async/await!** * Code is confusing. Devs who are not familiar with Promises very well, will not follow the code flow. * It’s hard to understand. What we return here? A result, because of `await` or a Promise, because `then` is a last statement? * Keep It Simple, Stupid (KISS) rule is broken here. You do NOT need constructions like that in your code. Do not mix `then` and `await` for the same Promise. How to do it right? ✅✅✅ ```js function myPromise() { return new Promise((resolve, reject) => { setTimeout(() => { resolve('Success'); }, 2000); }); } // async function always return a promise async function myFunAwait() { const result = await myPromise(); console.log(`Await ${result}`); } // then function always return a promise function myFunThen() { return myPromise().then(result => { console.log(`Then ${result}`); }); } console.log('Start'); await myFunAwait(); // you can also use then/catch to resolve await myFunThen(); // you can also use then/catch to resolve console.log('End'); // Output // Start // Await Success // Then Success // End ``` ### Creating New Promises You shouldn’t need to create a promise explicitly to manually call resolve or reject. **You shouldn’t wrap a Promise within a Promise.** ❌❌❌ ```js import apexMethodName from '@salesforce/apex/Namespace.Classname.apexMethodReference'; callApex() { return new Promise((resolve, reject) => { apexMethodName .then(result => { resolve(result); }) .catch(error => { reject(error); }); }) } ``` ✅✅✅ The refactor here is actually pretty simple: ```js import apexMethodName from '@salesforce/apex/Namespace.Classname.apexMethodReference'; async callApex() { const result = await apexMethodName(); // when error occurs reject will be call return result; // when success resolve will be call } ``` ### Nested Promises Nested promises in JavaScript can lead to "callback hell" or code that is difficult to read and maintain. Nested promises can create a chain of asynchronous code that is hard to follow and debug. Additionally, if an error occurs in a nested promise, it can be difficult to properly handle and propagate the error to a higher-level error handler. This can result in silent failures or unexpected behavior in the application. ❌❌❌ ```js async function getOrderDetailsWrapper(userId) { getUserData(userId) .then(user => { return getUserOrders(user.orderIds) .then(orders => { return getOrderDetails(orders[0].orderId) .then(details => { console.log(details); }) }) }) .catch(error => { console.error(error); }); }; getOrderDetailsWrapper(userId); ``` ✅✅✅ ```js async function getOrderDetailsWrapper(userId) { try { const user = await getUserData(userId); const orders = await getUserOrders(user.orderIds); const details = await getOrderDetails(orders[0].orderId); console.log(details); } catch (error) { console.error(error); } }; getOrderDetailsWrapper(userId); ``` --- If you have any questions, feel free to ask in the comment section below. 🙂 Was it helpful? Check out our other great posts [here](https://beyondthecloud.dev/blog). --- ## Resources * [Promises in LWC](https://beyondthecloud.dev/blog/promises-in-lwc-lightning-web-components) * [Promise.prototype.then()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global%5FObjects/Promise/then) * [Can await and then be mixed in one implementation?](https://stackoverflow.com/questions/54574662/can-await-and-then-be-mixed-in-one-implementation) * [What’s wrong with awaiting a promise chain?](https://stackoverflow.com/questions/54385676/whats-wrong-with-awaiting-a-promise-chain/54387912#54387912) * [Promise Anti patterns](https://github.com/petkaantonov/bluebird/wiki/Promise-anti-patterns#the-deferred-anti-pattern) * [Common Promise Anti Patterns](https://runnable.com/blog/common-promise-anti-patterns-and-how-to-avoid-them)