How to use async/await in JavaScript
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Async/await provides a cleaner, more readable syntax for handling asynchronous operations compared to traditional promise chains and callback patterns.
As the creator of CoreUI with over 25 years of JavaScript development experience, I’ve used async/await extensively in API calls, data processing, and complex asynchronous workflows.
From my expertise, the most effective approach is marking functions with async and using await to pause execution until promises resolve.
This syntax makes asynchronous code read like synchronous code while maintaining non-blocking behavior.
Mark functions with async and use await to pause execution until promises resolve.
async function fetchUserData(userId) {
const response = await fetch(`/api/users/${userId}`)
const userData = await response.json()
return userData
}
Here the async keyword before the function declaration enables the use of await inside the function body. The await fetch() pauses execution until the fetch promise resolves, returning the response object. The second await response.json() waits for the JSON parsing to complete before proceeding. This eliminates the need for .then() chains, making the code more readable and easier to debug while maintaining the same asynchronous behavior.
Best Practice Note:
This is the same approach we use in CoreUI components for clean data fetching and complex asynchronous operations. Always wrap async/await in try-catch blocks to handle promise rejections gracefully, and remember that async functions automatically return promises.
