JavaScript async/await Explained

async and await make promise-based JavaScript easier to read by allowing asynchronous code to be written in a sequential style.

A Simple Example

async function loadProducts() {
    const response = await fetch('/api/products');
    return await response.json();
}

Handling Errors

try {
    const products = await loadProducts();
    console.log(products);
} catch (error) {
    console.error(error);
}

Sequential Versus Parallel Work

If operations depend on one another, await them sequentially. If they are independent, start them together.

const [users, products] = await Promise.all([
    fetch('/api/users').then(r => r.json()),
    fetch('/api/products').then(r => r.json())
]);

Common Mistakes

• Forgetting to await a promise.
• Ignoring rejected promises.
• Running independent requests sequentially.
• Assuming every HTTP error automatically rejects fetch.

Conclusion

Use async/await for readable asynchronous workflows, combine independent operations with Promise.all(), and handle failures explicitly.

Back to JavaScript Tutorials