---
title: "How to deal with asynchronous code in LWC"
url: "https://blog.beyondthecloud.dev/tips/how-to-deal-with-asynchronous-code-in-lwc"
category: "LWC"
tags: "javascript, debugging, async"
published: "2024-01-02"
---

# How to deal with asynchronous code in LWC

This approach results in a callback nest that is difficult to understand and debug. On the next page, you will learn how to do it properly!

### Async in LWC

You might have seen something like this before:

```javascript
async retrieveData() {
    await getAccounts({ country: this.country }).then(async accounts => {
        await findPartners({ accounts: accounts }).then(partners => {
            this.partners = partners;
        });
    });
}
```

This approach results in a callback nest that is difficult to understand and debug. On the next page, you will learn how to do it properly!

Use async/await when you want asynchronous code to behave like a synchronous one. JavaScript will pause function execution until the promise settles:

```javascript
async retrieveData() {
    try {
        const accounts = await getAccounts({ country: this.country });
        this.partners = await findPartners({ accounts: accounts });
    } catch (error) {
        console.error(error);
    }
}
```

If the data can be displayed later, or if you wish to perform another action only after the promise has been settled, utilize the then/catch block:

```javascript
retrieveAccounts() {
    getAccounts({ country: this.country })
        .then(accounts => {
            this.accounts = accounts;
        })
        .catch(error => {
            console.error(error);
        })
        .finally( () => {
            this.hideSpinner();
        })
}
```

Do not combine then/catch and async/await

It creates difficult to understand code, debugging is complicated and breaks the KISS principle

```javascript
async function example() {
    return await myPromise().then(result => {
        console.log(result);
    });
}
```

```javascript
async example() {
    const data = await myPromise();

    return data;
}
```

Avoid nesting promises

Instead of additional then/catch blocks, try to refactor the code into smaller blocks or use async/await instead.

```javascript
example(userId) {
    getAccount(userId).then(account => {
        return getPartner(account.Name).then(partner => {
            return getPartnerOrder(partner.OrderId).then(details => {
                this.partnerOrders = details;
            });
        });
    });
}
```

```javascript
async example(userId) {
    const account = await getAccount(userId);
    const partner = await getPartner(account.Name);
    this.partnerOrders = await getPartnerOrder(partner.OrderId);
}
```

Don’t create new promises

In most cases, there is no reason to explicit create promises. And especially, don’t wrap promises within a promise.

```javascript
example() {
    return new Promise((resolve, reject) => {
        asyncMethod
            .then(result => {
                resolve(result);
            })
            .catch(error => {
                reject(error);
            });
    })
}
```

```javascript
async example() {
    return await asyncMethod();
}
```

```javascript
example() {
    return asyncMethod().then(result => {
        console.log(result);
    });
}
```