14. Promises Architecture: States, Chaining & Custom MyPromise Polyfill • JavaScript & Advanced ES6+ (0-to-Hero Big Tech Standard) • Rishabh Ki Kaksha

Pehle zamane me asynchronous kaam ke liye callbacks use hote the. Par jab 5-6 callbacks nested ho jate the, toh ban jata tha **Callback Hell (Pyramid of Doom)** — code padhna aur error handle karna namumkin ho jata tha.

Is problem ko solve karne ke liye aaya: **Promise (Vada)**.

**Food Order Analogy:**
> Tu Swiggy pe pizza order karta hai.  
> App tujhe ek **Token / Order ID (Promise)** deti hai:  
> 1. **Pending:** Pizza ban raha hai.  
> 2. **Fulfilled (Resolved):** Pizza deliver ho gaya (`.then()`).  
> 3. **Rejected:** Restaurant band ho gaya / deliver nahi ho paya (`.catch()`).

---

### 2. Promise Ke 3 States & Immutability Rule

```
                  +--------------------------------+
                  |            PENDING             |
                  +--------------------------------+
                                  / \
                   resolve(data) /   \ reject(error)
                                v     v
      +----------------------------+ +---------------------------+
      |    FULFILLED (Resolved)    | |    REJECTED (Failed)      |
      +----------------------------+ +---------------------------+
```

*   **Rule 1 (One-Way Street):** Ek baar Promise Fulfilled ya Rejected ho gaya, uska state **Immutable** (LOCKED) ho jata hai. Wo dubara change nahi ho sakta!
*   **Rule 2 (Chainability):** Har `.then()` call ek **Naya Promise** return karta hai, jisse hum linear chain bana sakte hain.

---

### 3. Promise Chaining & Error Propagation

```javascript
fetchUser(101)
    .then(user => {
        console.log("User fetched:", user.name);
        return fetchUserOrders(user.id); // Return another Promise
    })
    .then(orders => {
        console.log("Orders count:", orders.length);
        return calculateTotal(orders);
    })
    .then(total => {
        console.log("Grand Total: ₹" + total);
    })
    .catch(error => {
        // Kisi bhi step par error aaye, single .catch() sabko handle kar leta hai!
        console.error("Pipeline Failed:", error.message);
    })
    .finally(() => {
        console.log("Operation Complete (Hide Loading Spinner)");
    });
```

---

### 4. Big Tech Interview L6 Round: Custom `MyPromise` Polyfill

Interviewers aksar bolte hain: *"Promise class khud scratch se bana kar dikhao bina native Promise use kiye."*

```javascript
class MyPromise {
    constructor(executor) {
        this.state = 'pending'; // 'pending', 'fulfilled', 'rejected'
        this.value = undefined;
        this.handlers = []; // Queue for .then callbacks

const resolve = (val) => {
            if (this.state !== 'pending') return; // State lock
            this.state = 'fulfilled';
            this.value = val;
            // Microtask queue me execute karo
            queueMicrotask(() => {
                this.handlers.forEach(h => h.onFulfilled(this.value));
            });
        };

const reject = (err) => {
            if (this.state !== 'pending') return;
            this.state = 'rejected';
            this.value = err;
            queueMicrotask(() => {
                this.handlers.forEach(h => h.onRejected(this.value));
            });
        };

try {
            executor(resolve, reject);
        } catch (error) {
            reject(error);
        }
    }

then(onFulfilled, onRejected) {
        onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : val => val;
        onRejected = typeof onRejected === 'function' ? onRejected : err => { throw err; };

return new MyPromise((resolve, reject) => {
            const executeHandler = () => {
                try {
                    const result = this.state === 'fulfilled' 
                        ? onFulfilled(this.value) 
                        : onRejected(this.value);

// Agar return value khud ek Promise hai
                    if (result instanceof MyPromise) {
                        result.then(resolve, reject);
                    } else {
                        resolve(result);
                    }
                } catch (e) {
                    reject(e);
                }
            };

if (this.state === 'pending') {
                this.handlers.push({
                    onFulfilled: () => executeHandler(),
                    onRejected: () => executeHandler()
                });
            } else {
                queueMicrotask(executeHandler);
            }
        });
    }

catch(onRejected) {
        return this.then(null, onRejected);
    }
}
```

---

### 5. Comparison Table: Callbacks vs Promises

---

### 6. Interview Ke 3 Sawal Is Topic Se

1. **Inversion of Control kya hota hai?** -> Jab hum third-party library ko callback pass karte hain aur hume guarantee nahi hoti ki wo callback 0 baar chalega, 10 baar chalega ya error dega. Promise is problem ko solve karta hai.
2. **`.then()` ke andar return na karein toh kya return hota hai?** -> `Promise.resolve(undefined)`.
3. **Promise/A+ specification kya hai?** -> Open standard jo define karta hai ki har compliant Promise implementation me `.then()` method aur state transitions kaise hone chahiye.

---
**Next Topic:** 15. Promise Combinators: all, allSettled, race, any & Concurrency Control

Loading lesson content...

🎯 Big Tech Coding & Interview Challenges

Practice these curated problems. Click "Load in Sandbox" to solve live in the Code Studio!

1 Questions

Hard

1. Custom MyPromise Class from Scratch (Big Tech L6 Round)

Implement a minimal custom `MyPromise` class supporting executor resolution, rejection, and `.then()` microtask chaining.

💡 View Pro Interview Hint

• Use queueMicrotask to defer handler execution.

JavaScript

Full IDE

Live Execution Terminal

Click "Execute Live" to run code.
                

🎯 Big Tech Coding & Interview Challenges

1. Custom MyPromise Class from Scratch (Big Tech L6 Round)

Lesson Mastery AI Quiz

AI Doubt Solver

CERTIFICATE OF COMPLETION

Rishabh Gehlot

PHP 8+ & Laravel 11 Master Track