Understanding Async/Await in JavaScript

1. What is Async/Await?

Async/Await is built on top of Promises, and it makes it easier to work with asynchronous code. An async function always returns a Promise, and within an async function, you can use the await keyword to pause the execution until the Promise is resolved.

2. Declaring an Async Function

To declare an async function, simply use the async keyword before the function declaration:

async function fetchData() {
    // Function logic here
}

3. Using Await to Handle Promises

Inside an async function, you can use the await keyword to wait for a Promise to resolve:

async function fetchData() {
    let response = await fetch('https://api.example.com/data');
    let data = await response.json();
    console.log(data);
}

In this example, the code will pause execution at each await until the Promise resolves.

4. Handling Errors with Try/Catch

You can use try/catch blocks to handle errors in async functions:

async function fetchData() {
    try {
        let response = await fetch('https://api.example.com/data');
        if (!response.ok) throw new Error('Network response was not ok');
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('There was a problem with the fetch operation:', error);
    }
}

5. Example: Fetching Data from an API

Here's a complete example of using async/await to fetch data from a public API:

async function getUsers() {
    try {
        let response = await fetch('https://jsonplaceholder.typicode.com/users');
        let users = await response.json();
        console.log(users);
    } catch (error) {
        console.error('Error fetching users:', error);
    }
}

getUsers();

In this example, we fetch user data from a placeholder API and log the results.

6. Conclusion

Async/Await provides a clean and straightforward way to handle asynchronous code in JavaScript. By using these keywords, you can write code that is easier to read and maintain compared to traditional Promise chaining.