Skip to content

JavaScript Promises 🚀

Prerequisites: JavaScript Functions

Mentor's Note: In life, you don't wait for the laundry to finish before starting to cook dinner. You do both! Asynchronous JavaScript allows your code to "Wait in the background" while other things keep running. 💡

🌟 The Scenario: The Pizza Shop 🍕

Imagine you order a pizza at a local restaurant.

  • The Order (The Promise): You pay your money and the clerk gives you a Buzzer (The Promise Object). 📦
  • The Process (The Wait): The buzzer is currently "Pending." You can go back to your table and talk to friends (Asynchronous execution). 📦
  • The Result:
    • Success (Resolved): The buzzer rings! You get your pizza. 🍕
    • Failure (Rejected): The clerk tells you they ran out of dough. You get an apology. ❌
  • The Result: You only stop what you're doing once the buzzer rings! ✅

📖 Concept Explanation

1. What is a Promise?

A Promise is an object representing the eventual completion (or failure) of an asynchronous operation and its resulting value.

2. The 3 States

  1. Pending: Initial state, neither fulfilled nor rejected.
  2. Fulfilled (Resolved): The operation completed successfully.
  3. Rejected: The operation failed.

🎨 Visual Logic: The Timeline

graph LR
    A[Order Pizza 🍕] --> B{Wait... ⏳}
    B -- "Success ✅" --> C[Eat! (.then)]
    B -- "Error ❌" --> D[Refund! (.catch)]
    C --> E[Finally done.]
    D --> E

💻 Implementation: The Async Lab

// 🛒 Scenario: Ordering Pizza
// 🚀 Action: Using await to pause logic nicely

async function getDinner() {
    console.log("Ordering pizza... 🛒");

    try {
        // Wait for the oven (The Promise)
        const pizza = await pizzaPromise(); 
        console.log("Eating " + pizza + "! 🍕");
    } catch (error) {
        console.log("Error: " + error); // 🛍️ If shop is closed
    } finally {
        console.log("Dinner time over.");
    }
}

// 🚀 Action: Using .then() and .catch()

pizzaPromise()
    .then(pizza => console.log("Eating: " + pizza))
    .catch(err => console.log("Oh no: " + err))
    .finally(() => console.log("Done."));

📊 Sample Dry Run

Time Code Line Action Status
0ms fetchData() Start Request 📤 Pending ⏳
10ms console.log("Hi") Runs immediately! Running
500ms await finishes Request returns 📥 Resolved ✅

📉 Technical Analysis

  • Microtasks: Promises have their own high-priority queue in the JavaScript Event Loop. ⚡
  • Why use them?: To avoid Callback Hell (Pyramid of Doom), where your code keeps shifting right until it's unreadable.

🎯 Practice Lab 🧪

Task: The Data Fetcher

Task: Write an async function that uses the fetch() API to get data from https://jsonplaceholder.typicode.com/todos/1. Print the title of the todo. Hint: const response = await fetch(url); const data = await response.json();. 💡

💡 Interview Tip 👔

"Interviewers love to ask: 'Does await block the main thread?' Answer: NO. It only pauses the execution of the async function itself, allowing the rest of the browser to stay responsive."

💡 Pro Tip: "Asynchronous programming is about efficiency. Don't wait for one thing to finish when you can do ten other things in the meantime!" - Anonymous

← Back: Callbacks | Next: Web Storage →