Pumble In JavaScript

Understanding JavaScript Promises

Promises are a powerful feature in JavaScript that simplify the handling of asynchronous operations. They provide a cleaner and more intuitive way to work with async code, avoiding issues like "callback hell."

---

What is a Promise?

A Promise is an object that represents the eventual completion (or failure) of an asynchronous operation and its resulting value. It allows you to write more manageable asynchronous code by chaining operations and handling errors effectively.

States of a Promise

A Promise has three states:

• Pending: The initial state, neither fulfilled nor rejected.
• Fulfilled: The operation completed successfully, and the promise has a resulting value.
• Rejected: The operation failed, and the promise has a reason for failure (usually an error).

Example:

const promise = new Promise((resolve, reject) => {
  let success = true; // Change to false to simulate rejection

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

promise
  .then((result) => console.log(result))
  .catch((error) => console.error(error));

---

Promise Methods

1. then()

• Used to handle the fulfillment of a promise.
• Returns another promise, enabling chaining.

promise
  .then((result) => {
    console.log(result);
    return "Next Step";
  })
  .then((nextResult) => console.log(nextResult));

2. catch()

• Used to handle promise rejections.

promise.catch((error) => console.error(error));

3. finally()

• Used to execute a piece of code regardless of the promise's outcome.

promise.finally(() => console.log("Cleanup actions."));

4. Promise.all()

• Resolves when all promises in an array are resolved.
• Rejects immediately if any promise is rejected.

const promise1 = Promise.resolve(10);
const promise2 = Promise.resolve(20);

Promise.all([promise1, promise2]).then((results) => console.log(results));

5. Promise.allSettled()

• Waits for all promises to settle (either fulfilled or rejected).

const promise1 = Promise.resolve("Success");
const promise2 = Promise.reject("Error");

Promise.allSettled([promise1, promise2]).then((results) => console.log(results));

6. Promise.race()

• Resolves or rejects as soon as one of the promises resolves or rejects.

const promise1 = new Promise((resolve) => setTimeout(resolve, 500, "One"));
const promise2 = new Promise((resolve) => setTimeout(resolve, 100, "Two"));

Promise.race([promise1, promise2]).then((result) => console.log(result));

7. Promise.any()

• Resolves as soon as any of the promises is fulfilled.
• Rejects if all promises are rejected.

const promise1 = Promise.reject("Error 1");
const promise2 = Promise.resolve("Success");
const promise3 = Promise.reject("Error 2");

Promise.any([promise1, promise2, promise3]).then((result) => console.log(result));

---

Chaining Promises

Chaining enables handling multiple asynchronous operations in sequence.

fetch("https://api.example.com/data")
  .then((response) => response.json())
  .then((data) => {
    console.log(data);
    return fetch("https://api.example.com/other-data");
  })
  .then((otherResponse) => otherResponse.json())
  .then((otherData) => console.log(otherData))
  .catch((error) => console.error("Error:", error));

---

Error Handling in Promises

Errors propagate through the promise chain until caught by a catch() block.

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))
  .catch((error) => console.error("Error:", error));

---

Real-Life Use Case Example

You can explore a detailed real-life use case of Promises here:

<script></script>

---

Conclusion

JavaScript Promises provide a robust way to handle asynchronous operations with clarity and efficiency. By mastering promises, you can write cleaner, more maintainable code and avoid pitfalls like callback hell. Start practicing with the methods and examples above, and you'll be well on your way to mastering asynchronous JavaScript!

The above is the detailed content of Pumble In JavaScript. For more information, please follow other related articles on the PHP Chinese website!