There is very high chance of working with apex methods in Lightning Web Components. There are two ways of calling apex method in LWC i.e. Imperative and wire. This can be easily handled when they are imported in same LWC where you want the result of apex method. Now think of scenarios to understand async and await where:-
- Apex method is supposed to be called by calling a public function defined in child component
- A util.js file has been used to have all the reusable apex method and needs to be called in main JS file of the LWC
- Apex method is supposed to be called by calling a public function defined in child component inside callback of a imperative apex method call.
async & await approach
We can easily handle above mention scenarios by using the async & await approach to get the result synchronously in Lightning Web Component. Let’s understand this via going through the code. We are going two Lightning Web Component. The names are:- asyncLearning & childAsync
Note:- asyncLearning has an additional js file named asyncLearningService to share code with JS controller of asyncLearning component.
ContactController.cls
ContactController has few methods which can be called from LWC. We are going to use this to understand the async and await functionality in Lightning Web Component.
public with sharing class ContactController {
@AuraEnabled(cacheable=true)
public static Contact getSingleContact() {
return [
SELECT Id, Name, Title, Phone, Email
FROM Contact
WITH SECURITY_ENFORCED
LIMIT 1
];
}
@AuraEnabled(cacheable=true)
public static List<Contact> getListContact() {
return [
SELECT Id, Name, Title, Phone, Email
FROM Contact
WITH SECURITY_ENFORCED
LIMIT 10
];
}
@AuraEnabled(cacheable=true)
public static list<Account> getListAccount() {
return [
SELECT Id, Name
FROM Account
WITH SECURITY_ENFORCED
LIMIT 10
];
}
}childAsync.html
The html file does not have any code as there is not html required in above mention scenarios.
<template>
<!--put your child related html code here-->
</template>childAsync.js
The JavaScript file of the component has a public method which calls an apex method. Parent component can call handleParentCall public method by using querySelector.
import { LightningElement, api } from 'lwc';
import getSingleContact from '@salesforce/apex/ContactController.getSingleContact';
export default class ChildAsync extends LightningElement {
@api handleParentCall() {
return getSingleContact()
.then((result) => {
return result;
})
.catch((error) => {
console.log(error);
});
}
}childAsync.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>55.0</apiVersion>
<isExposed>false</isExposed>
</LightningComponentBundle>Now, We are going to create parent component where we will call the child component. The parent will have three buttons to execute the various scenarios of async and await in Lightning Web Component.
asyncLearning.html
Call Async Child Function Normally – This button will call the child component’s public method
Call Async Function from callback In Parent – This button will call the child component’s public method inside the callback of imperative apex method call in parent
Call Async Function from Service JS In Parent – This button will call the apex method exported in additional js file imported in parent js controller
<template>
<c-child-async></c-child-async>
<lightning-button label="Call Async Child Function Normally" onclick={handleCallNormal}></lightning-button>
<lightning-button label="Call Async Function from callback In Parent" onclick={handleCallfromCallback}>
</lightning-button>
<lightning-button label="Call Async Function from Service JS In Parent" onclick={handleCallfromService}>
</lightning-button>
</template>asyncLearning.js
handleCallNormal – This function will be called on click of Call Async Child Function Normally button in HTML. If user clicks on it, querySelector will be executed on child and public method in child will be executed
handleCallfromCallback – This function will be called on click of Call Async Function from callback In Parent button in HTML. If user clicks on it, first an imperative apex method call happen and once the result is available in callback, it calls the public method from child component.
handleCallfromService – This function will be called on click of Call Async Function from Service JS In Parent button in HTML. If user clicks on it, it will call the exported function from asyncLearningService.js file.
import { LightningElement } from 'lwc';
import getListContact from '@salesforce/apex/ContactController.getListContact';
import { getAccounts } from './asyncLearningService.js';
export default class AsyncLearning extends LightningElement {
async handleCallNormal() {
console.log('button is clicked whose label is Call Async Child Function Normally');
let contact = await this.template.querySelector('c-child-async').handleParentCall();
console.log('button click is finishing now & single contact is', contact);
}
handleCallfromCallback() {
console.log('button is clicked whose label is Call Async Function from callback In Parent');
getListContact()
.then(async (result) => {
console.log('list contact from server', result);
let contact = await this.template.querySelector('c-child-async').handleParentCall();
console.log('button click is finishing now & single contact is', contact);
})
.catch((error) => {
console.log(error);
});
}
async handleCallfromService() {
console.log('button is clicked whose label is Call Async Function from Service JS In Parent');
let accountlist = await getAccounts();
console.log('button click is finishing now & list of account is ', accountlist);
}
}asyncLearningService.js
This is shared JavaScript file of the parent component. It has one function which has been exported and can be called from main js controller file by importing it.
import getListContact from '@salesforce/apex/ContactController.getListContact';
const getAccounts = () => {
return getListContact().then((result) => {
return result;
}).catch((error) => {
console.log('getListContact', error);
});
};
export { getAccounts };asyncLearning.js-meta.xml
The component has been exposed to Home, Record and App Page.
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>55.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>async & await – Demo
GET IN TOUCH
Schedule a 1:1 Meeting with me
Do not forget to paste your code in comment. It would help others in case they get stuck. Also check out https://salesforcediaries.com/category/lightning-web-component/ to learn more on LWC.
