Lightning-Web-Components – LWC Async Function Returning Early

asynchronousjavascriptlightning-web-components

This may be an obvious question. It seems like it should be, but I haven't used async/await before. I have the below code

removeProduct(event) {
        let removeProduct = this.checkRemoveProduct();
        console.log('removeProduct: ' + removeProduct);
}


async checkRemoveProduct() {
    const result = await LightningConfirm.open({
        message: 'Are you sure you want to remove this product?',
        variant: 'headerless',
    });
    console.log('result: ' + result);
    return result;
}

The console logs from this are

removeProduct: [object Promise] //Promise is pending here

result: true

Why is the async method forcing a return without hitting any return line? Is there any way to get it to actually wait for the response before returning?

I realize I can write my code in a single function or chain calls, but I would really prefer to break it out if possible–and if nothing else understand why this happens.

Best Answer

Why is the async method forcing a return without hitting any return line?

That's the default behavior of async function: an async function always returns a Promise which will be resolved with the value returned by the async function. If the return value of an async function is not explicitly a promise, it will be implicitly wrapped in a promise.

Is there any way to get it to actually wait for the response before returning?

Yes and you already used it in checkRemoveProduct function: you have to await the async function. Let me quote the documentation:

Await expressions make promise-returning functions behave as though they're synchronous by suspending execution until the returned promise is fulfilled or rejected. The resolved value of the promise is treated as the return value of the await expression

So you could make removeProduct async in order to use await:

async removeProduct(event) {
    let removeProduct = await this.checkRemoveProduct();
    console.log('removeProduct: ' + removeProduct);
}

You could also handle it with a then():

removeProduct(event) {
    this.checkRemoveProduct()
    .then((removeProduct) => {
        console.log('removeProduct: ' + removeProduct);
    })
}

Or you could handle the promise returned by LightningConfirm.open with then()

removeProduct(event) {
    this.checkRemoveProduct()
}

checkRemoveProduct() {
    LightningConfirm.open({
        message: 'Are you sure you want to remove this product?',
        variant: 'headerless',
    })
    .then((result) => {
        if (result) {
            // OK was clicked
            // here you can call a function that handle this case
            // i.e. this.deleteProduct()
        } else {
            // Cancel was clicked
        }
    })
    return result;
}

Related Solutions

LWC Async/Await – How to Use async/await Functions in Lightning Web Components

async/await syntax is fully supported by LWC. However, as it was introduced in ES8, in old browsers, this syntax is transpiled down to ES5, which can cause performance issues if the code is executed many times.

the await keyword is only valid inside async functions

In your case to make your code deployable with using async/await syntax you can use 3 approaches:

Declare some async init() function and invoke it within connectedCallback() hook:

connectedCallback() {
    this.init();
}


async init() {
    try {
        this.accounts = await getAll();
        const value = await this.promiseFunc();
        console.log('2nd then executes after 3 seconds async, value:' + value);
    } catch (error) {
        this.error = error;
    } finally {
        this.isLoaded = true;
    }
}

Invoke it anonymously as an IIFE:

connectedCallback() {
    (async () => {
        try {
            this.accounts = await getAll();
            const value = await this.promiseFunc();
            console.log('2nd then executes after 3 seconds async, value:' + value);
        } catch (error) {
            this.error = error;
        } finally {
            this.isLoaded = true;
        }
    })();
}

Make your connectedCallback() lifecycle hook async:

async connectedCallback() {
    try {
        this.accounts = await getAll();
        await this.errorPromise();
        const value = await this.promiseFunc();
        console.log('2nd then executes after 3 seconds async, value:' + value);
    } catch (error) {
        this.error = error;
    } finally {
        this.isLoaded = true;
    }
}

I wouldn't recommend you to use the 3rd option at least for API consistency. Not sure about long term effects.

As for catching errors of async functions you can use try/catch block or handle them separately, using catch() method because async function implicitly returns a promise:

this.accounts = await getAll().catch(error => this.error = error);
const value = await this.promiseFunc().catch((/*rejected obj*/) => /*error handling*/);

Apex Lightning Web Components – Async/Await Value Not Returning

It is because of how you are passing in the input parameter to your apex class. You cannot use the '$objectApiName' inside a function. I will edit this post to be more detailed

for the code below, I am assuming you have @api objectApiName, at the top of your JS somewhere.

fieldSelectedToGetPicklistTypeField = '';
    getPicklistFieldsOptions(event) { 
        this.fieldSelectedToGetPicklistTypeField = event.detail.value;
        console.log('Value'+ this.fieldSelectedToGetPicklistTypeField);
        this.getPicklistValuesForSelectedPicklistField();
    }
    
    @track objectFieldOptionsList = [];
    async getPicklistValuesForSelectedPicklistField() {
        await getValueForSelectedPicklistField({ strObjectName: this.objectApiName, selectedField: this.fieldSelectedToGetPicklistTypeField })
        .then((result) => {
          if (result) {
              this.objectFieldOptionsList = [];
            for (let key in result) {
                this.objectFieldOptionsList.push({ label: key, value: result[key] });
            }
             
          } 
        }).catch((error) => {
          console.log('Error in getting pickist values')
        })
    }

Best Answer

Related Solutions

LWC Async/Await – How to Use async/await Functions in Lightning Web Components

Apex Lightning Web Components – Async/Await Value Not Returning

Related Topic