JavaScript Async/Await

You are reading Part 18 of the 39-part series: JavaScript Skill Progression: The Path from Beginner to Extreme. [Level 3]

Introduction

Async/Await is a modern JavaScript feature introduced in ES8 (ECMAScript 2017) that simplifies working with asynchronous code. It allows developers to write asynchronous operations in a synchronous-like manner, improving readability and maintainability.

Async/Await provides a cleaner and more structured way to handle asynchronous code in JavaScript. By replacing .then() chains with await and using try-catch for error handling, developers can write more readable and maintainable code. Mastering Async/Await is essential for modern JavaScript development, particularly when working with APIs and asynchronous operations.

1. Understanding Async/Await

Async/Await is built on top of Promises and provides a cleaner way to handle asynchronous operations without needing .then() chaining.

Basic Syntax

• async makes a function return a Promise.

• await pauses the execution of the function until the Promise is resolved.

async function fetchData() {
    let data = await someAsyncOperation();
    console.log(data);
}

2. Using Async/Await with Promises

Example: Fetching Data with Async/Await

function fetchUser() {
    return new Promise(resolve => {
        setTimeout(() => resolve("User data loaded"), 2000);
    });
}

async function getUser() {
    console.log("Fetching user...");
    let user = await fetchUser();
    console.log(user);
}

getUser();

Output:

Fetching user...
(User data loaded) (after 2 seconds)

• The await keyword pauses execution inside getUser() until fetchUser() resolves.

• The function resumes execution once the Promise is fulfilled.

3. Handling Errors with Try-Catch

One of the key advantages of Async/Await is its natural error handling using try-catch.

Example: Handling API Errors

async function fetchData() {
    try {
        let response = await fetch("https://invalid-api-url.com/data");
        if (!response.ok) {
            throw new Error(`HTTP error! Status: ${response.status}`);
        }
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.error("Error fetching data:", error.message);
    }
}

fetchData();

Key Benefits of Try-Catch

• Prevents crashes from unhandled rejections.

• Provides a structured way to handle errors.

• Works similarly to synchronous try-catch, making debugging easier.

4. Using Async/Await with Multiple Async Calls

Sometimes multiple asynchronous operations need to be executed sequentially.

Example: Running Multiple Async Calls in Sequence

async function fetchSequentialData() {
    try {
        let user = await fetchUser();
        console.log("User Data:", user);

        let posts = await fetchPosts();
        console.log("User Posts:", posts);
    } catch (error) {
        console.error("Error fetching data:", error.message);
    }
}

fetchSequentialData();

5. Running Async Tasks in Parallel with Promise.all()

If multiple independent asynchronous operations need to be executed concurrently, Promise.all() can be used.

Example:

async function fetchParallelData() {
    try {
        let [user, posts] = await Promise.all([fetchUser(), fetchPosts()]);
        console.log("User:", user);
        console.log("Posts:", posts);
    } catch (error) {
        console.error("Error fetching data:", error.message);
    }
}

fetchParallelData();

• Promise.all() runs all Promises in parallel, reducing execution time.

• If any Promise fails, the entire Promise.all() fails.

6. When to Use Async/Await?

You are reading Part 18 of the 39-part series: JavaScript Skill Progression: The Path from Beginner to Extreme. [Level 3]