Types of Promises in JavaScript

Forgive me for the Typos and Grammatical Mistakes, I'm still learning. ?

What are Promises?

Promises are a way to handle asynchronous operations in JavaScript. They represent a value that may be available now, or in the future, or never. Promises have three states: pending, fulfilled, and rejected.

Types of Promises

1. Pending: The initial state of a promise. It represents that the operation is still in progress and has not been completed yet.

2. Fulfilled: The state of a promise when the operation has been completed successfully. The promise has a value, and it is available to be used.

3. Rejected: The state of a promise when the operation has failed. The promise has a reason for the failure, and it can be handled using the catch method.

Why Promises are Important?

• Promises help in writing cleaner and more readable asynchronous code.
• They provide a way to handle asynchronous operations in a more structured manner.
• Promises can be chained together to perform multiple asynchronous operations sequentially.
• Whether fetching data, handling multiple tasks or racing for the fast result, Promises are essential in Modern JavaScript.

1. Simple Promise

const promise = new Promise((resolve, reject) => {
    // Imagine fetching user data from an API
    const user = {
        name: "Aasim Ashraf",
        age: 21,
    };

    user ? resolve(user) : reject("User not found");
});

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

A Promise that either resolves or rejects often used for API calls or async tasks.

• When to Use : For single async operation like fetching data from an API.
• Advantages : Clean handling of success and failure in one block.

2. Promise.all Multiple Operations

const fetchUser = fetch("/users").then((res) => res.json());
const fetchPosts = fetch("/posts").then((res) => res.json());

Promise.all([fetchUser, fetchPosts])
    .then(([user, posts]) => {
        console.log(user, posts);
    })
    .catch((error) => console.log(error));

Waits for all promises to resolve, if one fails, the whole chain fails. Best for multiple async tasks that needs to be resolved together.

• When to Use : For multiple async operations that are not dependent on each other.
• Advantages : Fetch multiple data at once and handle them together.
• Disadvantages : If one fails, all fail.

What Happens if One Promise Fails in Promise.all?

const fetchUser = fetch("/users").then((res) => res.json());
const fetchPosts = fetch("/posts").then((res) => res.json());

Promise.all([fetchUser, fetchPosts])
    .then(([user, posts]) => {
        console.log(user, posts);
    })
    .catch((error) => console.log(error));

Problem with Promise.all is that if one promise fails, the whole chain fails. To avoid this, you can use Promise.allSettled.

3. Promise.allSettled

const fetchUser = fetch("/users").then((res) => res.json());
const fetchPosts = fetch("/posts").then((res) => res.json());

Promise.allSettled([fetchUser, fetchPosts])
    .then((results) => {
        results.forEach((result) => {
            if (result.status === "fulfilled") {
                console.log("User Data:", result.value);
            } else {
                console.log("Error:", result.reason);
            }
        });
    });

Promise.allSettled waits for all promises to settle, whether they are resolved or rejected. It returns an array of objects with a status and value or reason.

• When to Use : When you want to know all results, even failures.
• Advantages : Fetch multiple data at once and handle them together.
• Disadvantages : If one fails, it won't stop the chain

4. Promise.race Fastest Result

const fast = new Promise(resolve => setTimeout(resolve, 1000, "Fast"));

const slow = new Promise(resolve => setTimeout(resolve, 2000, "Slow"));

Promise.race([fast, slow])
    .then((result) => {
        console.log(result);
    })
    .catch((error) => console.log(error));

Returns the result of the first promise to settle, whether it's resolved or rejected. Useful when you need speed, such as loading the first available response.

• When to Use : When speed matters more than waiting for all results.
• Limit : You may get an error if the fastest promise fails.

What if a Promise in Promise.race Fails?

const error = new Promise((resolve) => {
    setTimeout(() => resolve("Error"), 1000);
});

const success = new Promise((resolve) => {
    setTimeout(() => resolve("Success"), 2000);
});

Promise.race([error, success])
    .then((result) => {
        console.log(result);
    })
    .catch((error) => console.log("First Rejected",error));

If the first promise fails, the whole chain fails. To avoid this, you can use Promise.any.

5. Promise.any First Successful Result

const promise1 = Promise.reject("Error 1");
const promise2 = new Promise(resolve => setTimeout(resolve, 3000, "Promise 2"));

Promise.any([promise1, promise2])
    .then((result) => {
        console.log("First Success",result);
    })
    .catch((error) => console.log("All Rejected",error));

Resolves when any one Promise is resolved. Ignores all rejections until all promises are rejected. Useful when you need the first successful result, regardless of the rest.

• When to Use : When you need the first successful result, regardless of the rest of the promises.
• Limit : If all promises are rejected, it will throw an error.

Recap

• Simple Promise: For single async operation like fetching data from an API.
• Promise.all: For multiple async operations that are not dependent on each other.
• Promise.allSettled: When you want to know all results, even failures.
• Promise.race: When speed matters more than waiting for all results.
• Promise.any: When you need the first successful result, regardless of the rest of the promises.

Final Thoughts

• Choosing the right type of promise is the key to efficient asynchronous programming.
• Use the Promise that best fits your use case: Speed, multiple operations, or handling all results.

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