Why Promises Were Introduced

Before promises, JavaScript mainly used callbacks for asynchronous code.

Example:

setTimeout(() => {
  console.log("Task completed");
}, 2000);

Callbacks worked, but deeply nested callbacks became difficult to manage.

This problem is called:

Callback Hell

Callback Nesting Example

loginUser(() => {
  getProfile(() => {
    getOrders(() => {
      console.log("Done");
    });
  });
});

Hard to read and maintain.

What Is a Promise?

A promise represents:

A future value

It promises that:

• Data may arrive later

• Operation may succeed or fail

Real-Life Analogy

Ordering food online:

Order placed now
↓
Food arrives later

Promise works similarly.

Promise States

A promise has 3 states.

Promise Lifecycle Diagram

Creating a Promise

const promise = new Promise((resolve, reject) => {
  const success = true;

  if (success) {
    resolve("Operation successful");
  } else {
    reject("Operation failed");
  }
});

Understanding resolve and reject

Handling Success

Use:

.then()

Example

const promise = Promise.resolve("Data received");

promise.then((data) => {
  console.log(data);
});

Output

Data received

Handling Failure

Use:

.catch()

Example

const promise = Promise.reject("Server error");

promise.catch((error) => {
  console.log(error);
});

Output

Server error

Basic Promise Lifecycle

Promise Example With Timer

const promise = new Promise((resolve) => {
  setTimeout(() => {
    resolve("Task completed");
  }, 2000);
});

promise.then((result) => {
  console.log(result);
});

Output After 2 Seconds

Task completed

Why Promises Improve Readability

Callback Version

getUser(function(user) {
  getOrders(user, function(orders) {
    console.log(orders);
  });
});

Promise Version

getUser()
  .then((user) => {
    return getOrders(user);
  })
  .then((orders) => {
    console.log(orders);
  });

Cleaner and flatter structure.

Callback vs Promise Comparison

Promise Chaining

Promises can be connected using multiple .then() calls.

Example

Promise.resolve(5)
  .then((num) => {
    return num * 2;
  })
  .then((result) => {
    console.log(result);
  });

Output

10

How Chaining Works

First .then()
↓
Returns value
↓
Next .then() receives it

Promise Error Handling

Errors automatically move to .catch().

Example

Promise.reject("Something failed")
  .catch((error) => {
    console.log(error);
  });

Common Real-World Promise Usage

Promises are heavily used in:

• API requests

• Database queries

• File handling

• Authentication

• Async operations

Fetch API Example

fetch("https://jsonplaceholder.typicode.com/users")
  .then((response) => response.json())
  .then((users) => {
    console.log(users);
  })
  .catch((error) => {
    console.log(error);
  });

Common Beginner Mistakes

Forgetting return in Chain

Incorrect:

.then((data) => {
  getUser(data);
})

Better:

.then((data) => {
  return getUser(data);
})

Ignoring Errors

Always use:

.catch()

for proper error handling.

Promise Flow Summary

Create Promise
↓
Pending State
↓
Resolve OR Reject
↓
.then() OR .catch()

Key Takeaways

Final Notes

Promises became a major improvement in JavaScript because they made asynchronous code:

• Cleaner

• Easier to read

• Easier to manage

• Less nested

Understanding promises is essential before learning:

• Async/Await

• API handling

• Node.js async operations

• Modern frontend frameworks