Promises & Async/Await

JavaScript in the browser lives in a "single-threaded" architecture. If it gets stuck waiting for an API to finish fetching data, the entire Website UI cannot be scrolled or clicked.

To overcome this, the concept of Async was introduced, where it throws the data fetching process to the browser's back-door and promises (Promise) to notify when the data is ready.

Async / Await

The modern style for catching a Promise without nested callback techniques inside .then() (which can create "Callback Hell") is called the Async/Await syntax combination.

main.js

// 1. Assert that this is an Async Function
const fetchUserData = async () => {
    try {
        // 2. Await: Don't move to the line below before this promise is fulfilled (fetching API)
        const response = await fetch("https://jsonplaceholder.typicode.com/users/1");
        // 3. Await unpacking the response body into pure JSON
        const user = await response.json(); 
        console.log(`User Data Successfully Reached: ${user.name}`);
        
    } catch (error) {
        console.error("Failed to fetch data:", error);
    }
}
fetchUserData();