🧩 JavaScript Promises

Last Updated: 27th October 2025

A Promise in JavaScript represents the eventual completion or failure of an asynchronous operation.

It acts as a placeholder for a value that will be available sometime in the future (like API data, file reading, etc.).

Hinglish Tip 🗣: Promise ko samjho ek “future ka vaada” — abhi nahi, par result baad me mil jayega!

⚙️ Promise States

A Promise can be in one of three states:

Pending: The promise is not yet fulfilled or rejected.
Fulfilled: The promise has been fulfilled with a value.
Rejected: The promise has been rejected with an error.
Syntax:

let promise = new Promise((resolve, reject) => {
  // asynchronous code
});

promise
  .then((result) => {
    // handle success
  })
  .catch((error) => {
    // handle error
  })
  .finally(() => {
    // always runs
  });

Example: Basic Promise

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

  if (success) {
    resolve("Task completed!");
  } else {
    reject("Task failed!");
  }
});

promise
  .then((message) => console.log(message))
  .catch((error) => console.error(error))
  .finally(() => console.log("🎯 Operation finished"));

🗣 Hinglish: resolve() → jab sab sahi ho,reject() → jab kuch gadbad ho,finally() → dono case me chalega (cleanup).

Promise Chaining

You can run multiple asynchronous operations in sequence using .then() chaining — no callback hell!

new Promise((resolve) => {
  setTimeout(() => resolve(10), 1000);
})
  .then((num) => {
    console.log("First:", num);
    return num * 2;
  })
  .then((num) => {
    console.log("Second:", num);
    return num * 3;
  })
  .then((num) => {
    console.log("Third:", num);
  })
  .catch((err) => console.error(err))
  .finally(() => console.log("Done!"));

🗣 Hinglish: Yahaan har .then() pichle ka result le raha hai — ek ke baad ek chain me.

Promise.all()

Promise.all([
  new Promise((resolve) => setTimeout(() => resolve(10), 1000)),
  new Promise((resolve) => setTimeout(() => resolve(20), 2000)),
  new Promise((resolve) => setTimeout(() => resolve(30), 3000)),
])
  .then((values) => console.log(values))
  .catch((err) => console.error(err))
  .finally(() => console.log("Done!"));

⚠️ Error Handling in Promises

Use .catch() to handle any error in the chain.

new Promise((resolve, reject) => {
  reject("Something went wrong!");
})
  .then(() => console.log("Will not run"))
  .catch((error) => console.error("Caught:", error))
  .finally(() => console.log("Cleaning up..."));

Fake API Call

function fetchData() {
  return new Promise((resolve, reject) => {
    console.log("Fetching data... ⏳");

    setTimeout(() => {
      let success = Math.random() > 0.3;
      if (success) {
        resolve({ name: "Riya", age: 22 });
      } else {
        reject("Network Error!");
      }
    }, 1500);
  });
}

fetchData()
  .then((data) => {
    console.log("Data Received:", data);
    return data.name;
  })
  .then((name) => console.log("User:", name))
  .catch((err) => console.error("❌ Error:", err))
  .finally(() => console.log("📦 API Process Completed"));

Promise Hell → Cleaner Async Code

Before Promises, callbacks created Callback Hell:

setTimeout(() => {
  console.log("Task 1");
  setTimeout(() => {
    console.log("Task 2");
    setTimeout(() => {
      console.log("Task 3");
    }, 1000);
  }, 1000);
}, 1000);

✅ Using Promises:

function task(time, msg) {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log(msg);
      resolve();
    }, time);
  });
}

task(1000, "Task 1")
  .then(() => task(1000, "Task 2"))
  .then(() => task(1000, "Task 3"))
  .finally(() => console.log("All done!"));

← Previous Next →