Mastering Asynchronous JavaScript

JavaScript is single-threaded, but it handles concurrent operations beautifully using the Event Loop. Let’s look at how modern async/await syntax makes writing asynchronous code as easy as writing synchronous code.

The Old Way: Promises

Before async/await, we heavily relied on Promises to handle asynchronous tasks. While better than callbacks, they could still lead to “Promise hell” if not careful.

fetch("https://jsonplaceholder.typicode.com/users")
    .then((response) => response.json())
    .then((users) => {
        console.log(users);
    })
    .catch((error) => {
        console.error("Error fetching users:", error);
    });

The Modern Approach: Async/Await

With async/await, the same code becomes much cleaner and easier to read.

async function fetchUsers() {
    try {
        const response = await fetch(
            "https://jsonplaceholder.typicode.com/users",
        );
        if (!response.ok) {
            throw new Error("Network response was not ok");
        }
        const users = await response.json();
        console.log(users);
    } catch (error) {
        console.error("Error fetching users:", error);
    }
}

fetchUsers();

Key Takeaways

• await pauses the execution of the async function until the Promise settles.
• Use try/catch blocks for robust error handling.

Handling Multiple Promises Concurrently

Often, you’ll need to fetch data from multiple endpoints simultaneously rather than waiting for each one sequentially. The best approach is using Promise.all.

async function fetchDashboardData() {
    try {
        const [usersResponse, postsResponse] = await Promise.all([
            fetch("https://api.example.com/users"),
            fetch("https://api.example.com/posts"),
        ]);

        const users = await usersResponse.json();
        const posts = await postsResponse.json();

        return { users, posts };
    } catch (error) {
        console.error("Error fetching dashboard data:", error);
    }
}

When to use Promise.allSettled

Sometimes, you don’t want a single failure to reject the entire operation. This is where Promise.allSettled shines, as it waits for all promises to resolve or reject and returns an array describing the outcome of each promise.

Error Handling Strategies

Proper error handling is vital in modern applications. A try/catch block can easily manage errors, but what happens if we need more granular control?

Try/Catch with async/await

You can encapsulate risky parts inside specific try/catch blocks.

async function riskyOperation() {
    try {
        await someUnstableAPI();
    } catch (e) {
        // Fallback strategy here
        console.log("Using fallback mechanism.");
    }
}

Global Error Handlers

For unhandled promise rejections, the environment often provides global handlers, like window.addEventListener('unhandledrejection') in browsers.

Microtasks vs Macrotasks

Understanding the Event Loop is essential for mastering asynchronous JavaScript. Promises use the microtask queue, which has higher priority than the macrotask queue (e.g., setTimeout, setInterval).

Example of Event Loop Priorities

console.log("1. Script start");

setTimeout(() => {
    console.log("4. setTimeout");
}, 0);

Promise.resolve().then(() => {
    console.log("3. Promise");
});

console.log("2. Script end");

The output will be 1, 2, 3, 4 because microtasks run before the next macrotask.

Async Generators and Iterators

For processing large streams of asynchronous data, async generators are incredible. They allow you to await each chunk of data as it comes in.

async function* fetchPages(url) {
    let nextUrl = url;
    while (nextUrl) {
        const response = await fetch(nextUrl);
        const data = await response.json();
        yield data.results;
        nextUrl = data.nextPageUrl;
    }
}

Using Async Iterators

You can consume the generator using for await...of:

for await (const page of fetchPages("/api/data")) {
    console.log(page);
}

Top-Level Await

In newer versions of ECMAScript (and modern environments like Node.js with ES modules or modern browsers), you can use await at the top level of your module, meaning you don’t have to wrap everything in an async function.

// This works in an ES module!
const response = await fetch("https://api.github.com/users");
const data = await response.json();
console.log(data);

Conclusion

Mastering asynchronous JavaScript takes practice, but modern features like async/await, Promise.all, and async iterators make it incredibly powerful and much easier to reason about than the callback-heavy code of the past. Keep experimenting with the Event Loop and promise combinators to write the best non-blocking code possible!