Async-Await in Lightning Web Components

In the last post, we checked Promise in Lightning Web Components. While they provide easy control to Asynchronous JavaScript, but they also need different code syntax. Recently a new feature is added in JavaScript Async-Await. So today we will check how we can use in Async-Await Lightning Web Components to improve the flow.
Async-Await builds on promises, allowing them to be used in a way that much more closely resembles synchronous JavaScript.

Async

An async function is declared with the async keyword. Async functions are instances of the AsyncFunction constructor. The await keyword is permitted within them.
Async functions can contain zero or more await expressions. Await expressions suspend progress through an async function, yielding control. It subsequently resumes progress only when an awaited promise-based asynchronous operation is either fulfilled or rejected. The resolved value of the promise is treated as the return value of the await expression. The use of Async-Await enables the use of ordinary try/catch blocks around asynchronous code.

Syntax

async function name([param[, param[, ...param]]]) {
   statements
}

Await

The await expression causes async function execution to pause until a Promise is settled (that is, fulfilled or rejected), and to resume execution of the async function after fulfillment. When resumed, the value of the await expression is that of the fulfilled Promise. If the Promise is rejected, the await expression throws the rejected value. If the value of the expression following the await operator is not a Promise, it’s converted to a resolved Promise.

An await can split execution flow, allowing the caller of the await’s function to resume execution before the deferred continuation of the await’s function. After the await defers the continuation of its function, if this is the first await executed by the function, immediate execution also continues by returning to the function’s caller a pending Promise for the completion of the await’s function and resuming execution of that caller.

Now we will check the code for this. below is how our output will work.

We have used Async-Await function to control the execution.

async serialAsyncAwait() {
	console.log('\n\n Async-Await started');

	let methodName;
	try {
		methodName = await this.promiseHelper("A");
		console.log(`${methodName} Success`);
		methodName = await this.promiseHelper("B");
		console.log(`${methodName} Success`);
		methodName = await this.promiseHelper("C");
		console.log(`${methodName} Success`);
	} catch (ex) {
		console.log("Error", ex);
	}
}

So we first declare method with async keyword and then use the await keyword to pause the execution until the promise is settled. If we compare this code with Promise chaining then here we need to write very less code.
You can find all the related code here.

So we check how we can use Async-Await in Lightning Web Components. Did you like this post or have any questions, let me know in comments. Happy Programming 🙂