What are promises in Javascript

In JavaScript, a Promise is an object that represents the eventual completion (or failure) of an asynchronous operation and its resulting value. Promises are a cleaner way to work with asynchronous code compared to traditional callback functions, making it easier to handle success and errors in a predictable way.

1. How Promises Work

A Promise can be in one of three states:

1. Pending: The operation is still in progress.
2. Fulfilled: The operation completed successfully, and a value is available.
3. Rejected: The operation failed, and a reason (error) is available.

Once a Promise is either fulfilled or rejected, it becomes settled, and its state can no longer change.

2. Creating a Promise

A Promise is created using the Promise constructor, which takes a function (executor) with two parameters:

• resolve: Call this when the operation succeeds.
• reject: Call this when the operation fails.

Example:

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

  if (success) {
    resolve('Operation was successful!');
  } else {
    reject('Something went wrong.');
  }
});

3. Consuming a Promise

Promises are consumed using .then(), .catch(), and .finally() methods:

1. then(): Executes when the Promise is fulfilled.
2. catch(): Executes when the Promise is rejected.
3. finally(): Executes after the Promise is settled (either fulfilled or rejected).

Example:

myPromise
  .then(result => {
    console.log(result); // 'Operation was successful!'
  })
  .catch(error => {
    console.error(error); // 'Something went wrong.'
  })
  .finally(() => {
    console.log('Promise settled.');
  });

4. Practical Example

Simulating an Asynchronous Operation (e.g., Fetching Data):

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = true;

      if (success) {
        resolve('Data fetched successfully!');
      } else {
        reject('Failed to fetch data.');
      }
    }, 2000);
  });
}

// Using the Promise:
fetchData()
  .then(data => {
    console.log(data); // 'Data fetched successfully!'
  })
  .catch(error => {
    console.error(error); // 'Failed to fetch data.'
  });

5. Advantages of Promises

Avoid Callback Hell:

• Promises provide a structured way to chain asynchronous tasks, avoiding deeply nested callbacks.

• fetchUser()
    .then(getUserPosts)
    .then(showPosts)
    .catch(handleError);
  

Error Handling:

• Promises propagate errors through .catch(), making it easier to handle failures.

someAsyncOperation()
  .then(data => {
    throw new Error('Unexpected Error!');
  })
  .catch(err => {
    console.error(err.message); // 'Unexpected Error!'
  });

Chaining:

• Multiple .then() calls can be chained for sequential tasks.

6. Async/Await: A Cleaner Syntax

While Promises are powerful, JavaScript introduced async/await in ES8, making asynchronous code look more like synchronous code.

Example:

async function fetchData() {
  try {
    const data = await fetch('https://api.example.com/data');
    console.log(await data.json());
  } catch (error) {
    console.error('Error:', error);
  }
}

Summary

• A Promise is an object for handling asynchronous operations.
• It can be in one of three states: pending, fulfilled, or rejected.
• You consume Promises using .then(), .catch(), and .finally().
• Promises make code more readable, reduce callback nesting, and handle errors effectively.