Promises-in-JS.md

What are JavaScript Promises, and How Do They Work?

A Promise in JavaScript is an object that represents the eventual completion (or failure) of an asynchronous operation and its resulting value. It simplifies handling asynchronous operations, avoiding callback hell and making the code more readable and manageable.

Key Features of Promises

1. State: A promise has three states:

   • Pending: The operation has not completed yet.
   • Fulfilled: The operation completed successfully.
   • Rejected: The operation failed and returned an error.

2. Immutable Result: Once a promise is resolved (fulfilled or rejected), its result cannot be changed.

3. Chaining: Promises can be chained together using .then(), .catch(), and .finally() to handle successive asynchronous operations and manage errors or cleanup.

Syntax for Creating a Promise

let promise = new Promise((resolve, reject) => {
    // Perform some asynchronous operation
    if (/* operation is successful */) {
        resolve("Success message");
    } else {
        reject("Error message");
    }
});

• resolve: A function called when the operation is successful.
• reject: A function called when the operation fails.

Promise Methods

1. then()

• Handles successful promise resolutions and returns a new promise for chaining.

myPromise.then((message) => {
  console.log("Success:", message);
});

2. catch()

• Handles errors or rejected promises.

myPromise.catch((error) => {
  console.error("Error:", error);
});

3. finally()

• Executes after the promise is settled (fulfilled or rejected).

myPromise.finally(() => {
  console.log("Operation completed.");
});

4. Promise.all()

• Resolves when all promises in an array are fulfilled, or rejects if any promise fails.

Promise.all([promise1, promise2])
  .then((results) => {
    console.log("All promises resolved:", results);
  })
  .catch((error) => {
    console.error("One of the promises failed:", error);
  });

5. Promise.race()

• Resolves or rejects as soon as the first promise is settled.

Promise.race([promise1, promise2])
  .then((result) => {
    console.log("First promise settled:", result);
  })
  .catch((error) => {
    console.error("First promise failed:", error);
  });

How Promises Work

A promise is created using the Promise constructor, which takes a function with resolve and reject parameters to indicate success or failure. Here's a simple example:

Basic Example

const myPromise = new Promise((resolve, reject) => {
  let isSuccess = true;

  setTimeout(() => {
    if (isSuccess) {
      resolve("Operation was successful!");
    } else {
      reject("Operation failed!");
    }
  }, 2000);
});

myPromise
  .then((message) => {
    console.log(message); // Logs: "Operation was successful!"
  })
  .catch((error) => {
    console.error(error); // Logs error if rejected
  });

Real-World Example: Fetching Data

Promises are often used when working with APIs to handle asynchronous data fetching. Here's an example using fetch():

fetch("https://api.example.com/data")
  .then((response) => {
    if (!response.ok) {
      throw new Error("Network response was not ok");
    }
    return response.json();
  })
  .then((data) => {
    console.log("Data received:", data);
  })
  .catch((error) => {
    console.error("Error fetching data:", error);
  })
  .finally(() => {
    console.log("Fetch operation completed.");
  });

Chaining Promises

Promises can be chained to perform a series of asynchronous operations:

function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("Data fetched");
    }, 1000);
  });
}

function processData(data) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(`${data} and processed`);
    }, 1000);
  });
}

fetchData()
  .then((data) => {
    console.log(data);
    return processData(data);
  })
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.error("Error:", error);
  })
  .finally(() => {
    console.log("All operations completed.");
  });

Summary

• Promises help manage asynchronous operations in JavaScript, making the code more readable and maintainable.
• Use .then() to handle success, .catch() to handle errors, and .finally() to perform cleanup tasks after the promise is settled.
• Promises can be chained and combined using Promise.all() and Promise.race() for complex asynchronous workflows.
• Promises provide a foundation for modern JavaScript asynchronous patterns, including async/await for even cleaner syntax.