Mastering JavaScript Promises: From Basics to Advanced Techniques

Types of Promises in JavaScript

Promises in JavaScript can be used in multiple ways. Here’s a breakdown of the different types and ways to handle them:

---

1️⃣ Basic Promise Object

A Promise is an object that represents an asynchronous operation. It has three states: Pending, Resolved (Fulfilled), and Rejected.

Example:

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

  setTimeout(() => {
    if (success) {
      resolve("Promise Resolved ✅");
    } else {
      reject("Promise Rejected ❌");
    }
  }, 2000);
});

---

2️⃣ Promise with .then() and .catch()

This is the traditional way to handle Promises using .then() for success and .catch() for errors.

Example:

javascriptCopyEditmyPromise
  .then(result => console.log(result)) // Handles success
  .catch(error => console.log(error)) // Handles error
  .finally(() => console.log("Promise Completed 🚀")); // Always runs

✅ Pros:
✔ Simple to use
✔ Handles errors with .catch()

❌ Cons:

• If too many .then() calls are nested, it can become unreadable.

---

3️⃣ Async/Await (Recommended for Readability)

Instead of .then(), async/await allows you to write asynchronous code that looks synchronous.

Example:

javascriptCopyEditasync function fetchData() {
  try {
    let response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
    let data = await response.json();
    console.log("Data received:", data);
  } catch (error) {
    console.error("Error fetching data:", error);
  }
}

fetchData();

✅ Pros:
✔ Cleaner syntax, avoids callback hell
✔ Easier debugging

❌ Cons:

• Must be used inside an async function

---

4️⃣ Promise.all() (Multiple Promises in Parallel)

Used when multiple promises need to be executed at the same time, and we want to wait for all of them to resolve.

Example:

javascriptCopyEditconst p1 = new Promise(resolve => setTimeout(() => resolve("P1 Done"), 2000));
const p2 = new Promise(resolve => setTimeout(() => resolve("P2 Done"), 3000));
const p3 = new Promise(resolve => setTimeout(() => resolve("P3 Done"), 1000));

Promise.all([p1, p2, p3])
  .then(results => console.log(results)) // ["P1 Done", "P2 Done", "P3 Done"]
  .catch(error => console.log(error));

✅ Pros:
✔ Runs all promises in parallel (faster execution)
✔ Resolves when all are done

❌ Cons:

• If one promise fails, everything fails

---

5️⃣ Promise.race() (First Promise to Resolve)

Returns the result of the first promise that resolves or rejects.

Example:

javascriptCopyEditPromise.race([p1, p2, p3])
  .then(result => console.log("First Done:", result)) // Whichever is fastest
  .catch(error => console.log(error));

✅ Pros:
✔ Useful for timeouts (fastest response wins)

❌ Cons:

• Ignores other promises once one is resolved/rejected

---

6️⃣ Promise.any() (First Resolved Promise, Ignores Rejections)

Returns the first successfully resolved promise and ignores rejected ones.

Example:

javascriptCopyEditconst failPromise = new Promise((_, reject) => setTimeout(() => reject("Failed"), 500));
const fastSuccess = new Promise(resolve => setTimeout(() => resolve("Success!"), 200));

Promise.any([failPromise, fastSuccess])
  .then(result => console.log(result)) // "Success!"
  .catch(error => console.log("All promises failed:", error));

✅ Pros:
✔ If one promise fails, it still waits for a successful one

❌ Cons:

• If all fail, it throws AggregateError

---

7️⃣ Promise.allSettled() (Waits for All, Doesn't Fail on Errors)

Returns an array with results of all promises (resolved or rejected).

Example:

javascriptCopyEditPromise.allSettled([p1, failPromise, p2])
  .then(results => console.log(results));

✅ Pros:
✔ Unlike Promise.all(), it doesn't fail if one promise rejects

❌ Cons:

• Slightly slower than Promise.all()

---

Which One to Use?

---