Asynchronous JS, Event Loop, Promises & async/await

1. Simple Definition

JavaScript ek Single-Threaded language hai — iska matlab iske paas sirf ek hi Call Stack hota hai aur ye ek time par sirf ek hi line of code execute kar sakti hai. Lekin agar hume internet se 2 second lagakar data mangwana ho, toh kya browser 2 second ke liye freeze ho jayega? Nahi! Browser ke Asynchronous Architecture (Web APIs + Event Loop) ki wajah se heavy tasks background me execute hote hain aur hamara main UI thread smooth chalta rehta hai.

2. Real-Life Analogy

3. Why Do We Need It?

Real-world apps me 90% operations time-consuming hote hain: database se user profile load karna, high-res image download karna, timer chalana, ya payment gateway response ka wait karna. Agar JS synchronous hoti, toh har network request ke dauran browser screen freeze (not responding) ho jati.

4. Syntax & Evolution: Callbacks to async/await

// 1. Purana Tareeka: Callback Hell (Pyramid of Doom)
getData(function(a) {
  getMoreData(a, function(b) {
    getEvenMoreData(b, function(c) {
      console.log("Too many nested brackets!");
    });
  });
});

// 2. ES6: Promises (.then / .catch)
const fetchUser = () => {
  return new Promise((resolve, reject) => {
    let success = true;
    setTimeout(() => {
      if (success) resolve({ name: "Rahul", role: "Dev" });
      else reject("Error loading user");
    }, 1000);
  });
};

fetchUser()
  .then(user => console.log("User:", user.name))
  .catch(err => console.error("Failed:", err));

// 3. Modern Standard: async / await (Clean & Synchronous-Looking)
async function displayUser() {
  try {
    const user = await fetchUser();
    console.log("Async User:", user.name);
  } catch (error) {
    console.error("Caught error:", error);
  } finally {
    console.log("Done loading spinner stop!");
  }
}
displayUser();

5. Basic Example: Custom Sleep Helper with Promises

// Modern Promisified delay helper
const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));

async function runCountdown() {
  console.log("Starting countdown...");
  await delay(1000);
  console.log("3...");
  await delay(1000);
  console.log("2...");
  await delay(1000);
  console.log("1...");
  await delay(1000);
  console.log("🚀 Rocket Launched!");
}

runCountdown();

6. Output & Interactive Event Loop Demonstration

7. Code Explanation: Event Loop Architecture

8. Real-World Example: Parallel Requests with Promise.all

// Dono API calls ek saath parallel me start hongi (Time bachega!)
async function loadDashboard() {
  try {
    const [userData, ordersData] = await Promise.all([
      fetch('/api/user/101').then(res => res.json()),
      fetch('/api/user/101/orders').then(res => res.json())
    ]);

    console.log("User Name:", userData.name);
    console.log("Total Orders:", ordersData.length);
  } catch (err) {
    console.error("Koi ek API request fail ho gayi:", err);
  }
}

9. Common Mistakes

10. Best Practices

• Hamesha async function ke andar try...catch lagayein taaki unhandled promise rejection error se browser console lal na ho.
• Agar multiple API calls ek doosre par depend nahi karti, toh unhe sequentially await a; await b; karne ke bajaye Promise.all() se parallel call karein.
• Agar aap chahte hain ki ek request fail hone par bhi baaki chalte rahein, toh Promise.allSettled() use karein.

11. Try It Yourself

Code Playground me Promise.race() test karein: Do promises banayein (ek 500ms delay aur doosri 1000ms delay), aur dekhein ki kaunsi race jeetti hai!

12. Challenge

Ek function banayein fetchWithTimeout(url, timeoutMs) jo agar server se 3 second me response na aaye toh automatically request abort karke "Timeout Error: Server slow hai!" reject kare.

13. Interview Questions

14. Quick Revision

• JS is single-threaded; Event loop makes it non-blocking.
• Promises represent future values (Pending, Resolved, Rejected).
• async makes a function return a Promise; await pauses until resolved.
• Microtasks (Promises) > Macrotasks (setTimeout).

15. FAQ

Asynchronous JS, Event Loop, Promises & async/await

1. Simple Definition

JavaScript is a single-threaded programming language, meaning it can only execute one command at a time. To prevent long-running tasks (like network API requests or file downloads) from freezing the user interface, JavaScript employs an Asynchronous Event Loop architecture powered by Promises and async / await.

2. Real-Life Analogy

3. The Event Loop Architecture

The JavaScript runtime coordinates between:

• Call Stack: Executes synchronous code one frame at a time.
• Web APIs: Background browser threads handling timers (setTimeout), DOM events, and network fetches.
• Microtask Queue: High-priority queue for Promise resolutions (.then(), await).
• Task Queue (Macrotasks): Standard queue for setTimeout and setInterval callbacks.

4. Promises: States & Syntax

// A Promise has 3 states: Pending -> Fulfilled OR Rejected
const orderBurger = new Promise((resolve, reject) => {
  const isAvailable = true;
  setTimeout(() => {
    if (isAvailable) resolve("🍔 Burger is ready!");
    else reject(new Error("Out of stock!"));
  }, 1000);
});

// Consuming Promise via .then() and .catch()
orderBurger
  .then(meal => console.log(meal))
  .catch(err => console.error(err.message));

5. Modern async / await (Syntactic Sugar)

// async functions return a Promise automatically
async function fetchUserDashboard(userId) {
  try {
    console.log("Loading dashboard...");
    const response = await fetch(`https://api.example.com/users/${userId}`);
    if (!response.ok) throw new Error(`HTTP Error: ${response.status}`);

    const userData = await response.json();
    return userData;
  } catch (error) {
    console.error("Dashboard failed to load:", error.message);
    return null;
  }
}

6. Common Mistakes

7. Best Practices

• Always use async / await over deeply chained .then() callbacks.
• Always wrap await statements in try / catch blocks.
• Use Promise.all() to fire multiple independent network requests concurrently!

8. Practice Exercise

9. Interview Questions

10. Summary / Cheat Card

• JavaScript is single-threaded; Event Loop handles concurrency.
• Promises represent future values (Pending, Fulfilled, Rejected).
• async / await makes asynchronous code read like synchronous logic.
• Promise.all() executes parallel requests concurrently.

11. FAQ