Promises

1. Introduction

A Promise is a proxy placeholder object representing the eventual completion (or failure) of an asynchronous operation and its resulting value. Promises solve the inversion of control issues of callbacks by providing a standardized API for handling asynchronous events.

2. Why It Matters

Promises are the foundation of modern asynchronous JavaScript APIs (like the fetch API). They allow you to chain operations, propagate errors to a single catch block, and handle asynchronous events cleanly.

3. Real-World Analogy

Think of a Pager at a Restaurant:

• Pending State: You order food. The host hands you a plastic pager (the Promise). Your food is not ready, but you have a placeholder for it.
• Fulfilled State: Your food is ready. The pager buzzes and flashes (resolves the promise). You swap the pager for your meal (resolved value).
• Rejected State: The kitchen runs out of ingredients. The pager flashes red (rejects the promise), signaling that the order failed. You check in at the desk to handle the error.

4. Promise States

A Promise is always in one of three mutually exclusive states:
• Pending: The initial state. The asynchronous operation is still running.
• Fulfilled: The operation completed successfully. The promise has a resolved value.
• Rejected: The operation failed. The promise has a rejection reason (error).
Once a Promise resolves or rejects, its state is settled and cannot change.

5. Chaining & Error Propagation

Methods like .then() and .catch() always return a new Promise, allowing you to flatten asynchronous pipelines into a single chain. Errors propagate down the chain automatically until they reach the first .catch() block.

6. Practical Example

This script shows how to wrap a classic callback-based timer inside a Promise:

7. Common Mistakes

• Forgetting to return nested Promises: If you omit the return keyword inside a .then() callback, the next .then() block in the chain runs immediately with the value undefined instead of waiting for the nested promise to resolve.

8. Quick Quiz

9. Scenario-Based Challenge

10. Debugging Exercise

const p = new Promise((resolve, reject) => {
  setTimeout(() => {
    throw new Error('Async crash'); // throws inside a background timer!
  }, 100);
});
p.catch(err => console.log('Caught: ' + err.message)); // never runs!

const p = new Promise((resolve, reject) => {
  setTimeout(() => {
    try {
      throw new Error('Async crash');
    } catch (e) {
      reject(e); // Reject the Promise explicitly
    }
  }, 100);
});

11. Interview Questions

12. Production Considerations

• • Handle Unhandled Rejections: Always add a .catch() block to your Promise chains. In Node.js or browser production environments, monitor global unhandled rejection events (like the unhandledrejection window listener) to prevent silent application crashes.