Asynchronous JavaScript: Promises and Async/Await

---

Introduction

JavaScript is single-threaded, meaning it executes code one operation at a time. However, some tasks—like fetching data, reading files, or handling timers—can take time. If JavaScript waited for each task to finish before moving to the next, the entire application would freeze. To avoid this, JavaScript uses asynchronous programming, allowing other tasks to run while waiting for a long process to complete.

In this article, we’ll explore why asynchronous JavaScript is important, the problems with callbacks, and how Promises and async/await help us write cleaner, more efficient code.

Why Do We Need Asynchronous JavaScript?

Consider a scenario where you need to fetch user data from a server:

const user = fetchUserData(); // Fetching takes time
console.log(user); // What will this print?

Since fetchUserData() is asynchronous (it takes time), JavaScript does not wait for the result. Instead, it moves to the next line, which means console.log(user) runs before the data is fetched, causing unexpected results.

Asynchronous JavaScript helps us manage such delays without blocking the rest of the code.

Callback Functions – The Old Approach

Before Promises and async/await, JavaScript used callbacks to handle asynchronous operations. A callback is a function passed as an argument to another function and is executed after some time.

Example: Using Callbacks

function fetchData(callback) {
    setTimeout(() => {
        callback("Data received");
    }, 2000);
}

fetchData(function(result) {
    console.log(result); // Output after 2 seconds: Data received
});

While this works, callbacks have a major issue—callback hell.

Callback Hell – The Problem with Callbacks

When multiple asynchronous operations depend on each other, we nest callbacks inside callbacks, making the code hard to read and maintain.

Example: Callback Hell

getUser(1, function(user) {
    getOrders(user.id, function(orders) {
        processOrders(orders, function(processedOrders) {
            console.log("Processed Orders:", processedOrders);
        });
    });
});

This deeply nested structure is called callback hell (or "pyramid of doom"), making debugging difficult.

To solve this, Promises were introduced.

What is a Promise?

A Promise is an object representing the eventual completion (or failure) of an asynchronous operation. It acts as a placeholder for a value that will be available sometime in the future.

States of a Promise

A Promise can be in one of three states:

1. Pending → Initial state, operation not yet complete.

2. Fulfilled → Operation completed successfully.

3. Rejected → Operation failed.

Once a Promise transitions from pending to either fulfilled or rejected, it becomes immutable (its state cannot change).

Example:

We create a Promise using the new Promise() constructor.

const myPromise = new Promise((resolve, reject) => {
    let success = true; // Simulating success or failure

    setTimeout(() => {
        if (success) {
            resolve("Data fetched successfully!"); // Promise fulfilled
        } else {
            reject("Error fetching data!"); // Promise rejected
        }
    }, 2000);
});

Here,

• resolve(value) → moves Promise to fulfilled state with a value.

• reject(error) → moves Promise to rejected state with an error.

Handling Promises with .then() and .catch()

To handle the result of a Promise, we use .then() and .catch().

myPromise
    .then(response => console.log(response))  // If resolved: Data fetched successfully!
    .catch(error => console.error(error));   // If rejected: Error fetching data!

• .then() executes when the Promise resolves.

• .catch() executes when the Promise rejects.

Why Use Async/Await?

While Promises improve asynchronous code, chaining multiple .then() statements can still be cumbersome.

Async/Await allows writing asynchronous code that looks synchronous.

Using Async/Await

async keyword makes a function return a Promise.
await pauses execution until a Promise resolves.

async function fetchData() {
    try {
        let response = await fetch("https://jsonplaceholder.typicode.com/posts/1");
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.error("Error:", error);
    }
}

fetchData();

More readable than Promises
Error handling using try...catch
No need for .then() chaining

Conclusion

Asynchronous programming is essential for modern web development, enabling smooth, non-blocking operations like fetching data, handling files, and managing user interactions.

Both Promises and async/await offer powerful ways to manage asynchronous tasks, each with its strengths:

• Promises allow chaining and parallel execution using Promise.all(), making them great for handling multiple asynchronous operations at once.

• Async/Await simplifies the syntax, making asynchronous code easier to read and debug, closely resembling synchronous code.