How can you handle asynchronous code in JavaScript using async/await?

What is Async/Await in JavaScript?

• async: A keyword used to declare a function as asynchronous. It allows the function to return a Promise implicitly.
• await: A keyword used to pause the execution of an async function until a Promise is resolved or rejected. It can only be used inside an async function.

In essence, async/await allows you to write asynchronous code that looks and behaves like synchronous code, making it more readable and maintainable.

How Does Async/Await Work?

1. When you declare a function as async, it automatically returns a Promise.
2. Inside an async function, you can use await to wait for a Promise to resolve.
3. When await is used, the code execution pauses at that point until the Promise is resolved or rejected.
4. Once the Promise is resolved, the value is returned, and the function execution continues.

Example of Async/Await

Let’s look at a simple example where we simulate fetching data from an API using async/await.

javascriptCopy code// A simple function to simulate a network request
function fetchData() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve("Data fetched!");
        }, 2000); // Simulate 2 seconds of network delay
    });
}

// An async function that uses await to handle the asynchronous code
async function getData() {
    console.log("Fetching data...");
    const result = await fetchData(); // Wait for the Promise to resolve
    console.log(result); // "Data fetched!"
}

getData();

Breaking Down the Example:

• fetchData() returns a Promise that resolves after a 2-second delay (simulating an asynchronous operation like a network request).
• getData() is an asynchronous function marked with the async keyword. Inside this function, the await keyword is used to pause the execution until the fetchData() Promise resolves.
• When the Promise resolves, await returns the value ("Data fetched!"), which is then logged to the console.

Error Handling with Async/Await

Handling errors in asynchronous code is essential. With async/await, you can use try...catch blocks to catch any errors that occur while awaiting a Promise.

Here’s an example with error handling:

javascriptCopy codefunction fetchDataWithError() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            reject("Error: Unable to fetch data");
        }, 2000);
    });
}

async function getDataWithErrorHandling() {
    try {
        const result = await fetchDataWithError();
        console.log(result);
    } catch (error) {
        console.log(error); // Handle the error here
    }
}

getDataWithErrorHandling();

• fetchDataWithError() returns a Promise that rejects with an error message after a delay.
• getDataWithErrorHandling() uses a try...catch block to catch and handle the error thrown by the rejected Promise.

When an error occurs in the async function, the catch block is executed, allowing you to handle the error gracefully.

Sequential vs. Parallel Execution with Async/Await

One of the benefits of async/await is that it makes sequential and parallel asynchronous operations clearer and easier to manage.

1. Sequential Execution (Waiting for Each Step to Finish)

When using await for multiple asynchronous tasks, they execute sequentially, one after the other.

javascriptCopy codeasync function sequentialTasks() {
    const result1 = await task1();
    const result2 = await task2(); // This waits for task1 to complete
    console.log(result1, result2);
}

In this case, task2 won’t start until task1 finishes, which might not be the most efficient if you want both tasks to run in parallel.

2. Parallel Execution (Running Multiple Promises Simultaneously)

To run multiple asynchronous tasks in parallel, you can use Promise.all().

javascriptCopy codeasync function parallelTasks() {
    const [result1, result2] = await Promise.all([task1(), task2()]);
    console.log(result1, result2);
}

• Both task1() and task2() will run in parallel, and await Promise.all() will wait for both promises to resolve.
• This approach is more efficient when the tasks are independent and don’t rely on each other’s results.

Real-World Example: Fetching Data from an API

Here’s an example of fetching data from a real API using async/await:

javascriptCopy codeasync function fetchUserData() {
    try {
        const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
        const data = await response.json(); // Wait for the JSON to parse
        console.log(data); // Log the user data
    } catch (error) {
        console.error('Error fetching user data:', error);
    }
}

fetchUserData();

In this example:

• fetchUserData() is an async function that fetches user data from a placeholder API.
• await fetch() waits for the response, and await response.json() waits for the response to be converted to JSON.
• If an error occurs (like a network issue), it’s caught in the catch block, making error handling straightforward.

Advantages of Async/Await Over Promises and Callbacks

• Readable Code: Code using async/await is much more readable and looks synchronous, making it easier to follow and understand.
• Cleaner Error Handling: try...catch blocks make handling errors simpler and more consistent than chaining .catch() in Promises.
• Avoiding “Callback Hell”: With async/await, you can avoid deeply nested callbacks, leading to cleaner, more maintainable code.

Best Practices for Async/Await

1. Use try...catch for Error Handling: Always wrap your asynchronous code in try...catch blocks to handle errors gracefully.
2. Run Independent Tasks in Parallel: Use Promise.all() when you need to run multiple asynchronous tasks that don’t depend on each other, to optimize performance.
3. Don’t Block with Unnecessary await: If you don’t need to wait for a Promise to resolve before moving on, don’t block the code unnecessarily.
4. Use Async/Await Only Where Needed: Async/await should be used where you need to wait for a Promise to resolve. Don’t overuse it in places where it’s not necessary.