Async/Await in Lightning Web Components (LWC)

Asynchronous programming is a cornerstone of modern web development, especially in Salesforce Lightning Web Components (LWC), where server calls and data fetching are frequent tasks.

In this blog, we’ll dive deep into async/await in LWC, explore practical scenarios, and demonstrate how to write clean, efficient code.

1. Asynchronous Programming

JavaScript is single-threaded, meaning it processes one operation at a time. Blocking operations (like server calls) would freeze the UI if handled synchronously. Asynchronous code allows non-blocking execution, ensuring smooth user experiences.

In LWC, asynchronous operations include:

• Fetching data from Apex methods.
• Calling external APIs.
• Handling user interactions that require server communication.

2. Promises Recap

Async/await is built on Promises, which represent the eventual result of an asynchronous operation. A Promise can be:

• Pending: Initial state.
• Fulfilled: Operation completed successfully.
• Rejected: Operation failed.

Traditional Promise Syntax:

fetchData() {
return getDataFromApex()
.then(result => {
this.data = result;
})
.catch(error => {
this.error = error;
});
}

3. Introduction to Async/Await

Async/await simplifies working with Promises by making asynchronous code look synchronous.

• Async: Declares a function that returns a Promise.
• Await: Pauses execution until the Promise settles (resolves or rejects).

Basic Syntax: 

async fetchData() {
try {
const result = await getDataFromApex();
this.data = result;
} catch (error) {
this.error = error;
}
}

4. Using Async/Await in LWC

4.1 Basic Example: Imperative Apex Call

Call an Apex method imperatively and handle the result.

JavaScript (ContactList.js):

import { LightningElement } from \'lwc\';
import getContacts from \'@salesforce/apex/ContactController.getContacts\';

export default class ContactList extends LightningElement {
contacts;
error;

async loadContacts() {
try {
this.contacts = await getContacts();
} catch (error) {
this.error = error.body.message;
}
}
}

4.2 Error Handling with Try/Catch

Handle errors from Apex methods.

async loadData() {
try {
const data = await riskyApexCall();
this.data = data;
} catch (error) {
console.error(\'Error:\', error);
this.error = \'Failed to load data.\';
}
}

</div>
<div><template>
<lightning-button label="Load Contacts" onclick={loadContacts}></lightning-button>
<template if:true={contacts}>
<!-- Display contacts -->
</template>
<template if:true={error}>
<div class="error">{error}</div>
</template>
</template>

async loadAllData() {
try {
const [users, accounts] = await Promise.all([
getUsers(),
getAccounts()
]);
this.users = users;
this.accounts = accounts;
} catch (error) {
this.error = error;
}
}

async processData() {
<div class="md-code-block">
<div class="md-code-block-banner-wrap">
<div>try {
const rawData = await fetchRawData();
const processedData = await processRawData(rawData);
this.data = processedData;
} catch (error) {
this.error = error;
}
}</div>
<div>