JavaScript BigInt

JavaScript Promise

Last Updated : 18 Jan, 2025

JavaScript Promises make handling asynchronous operations like API calls, file loading, or time delays easier. Think of a Promise as a placeholder for a value that will be available in the future. It can be in one of three states

Pending: The task is in the initial state.
Fulfilled: The task was completed successfully, and the result is available.
Rejected: The task failed, and an error is provided.

Here is an example Promise to check if a number is even. If yes, it resolves; otherwise, it rejects.

JavaScript

let checkEven = new Promise((resolve, reject) => {
    let number = 4;
    if (number % 2 === 0) resolve("The number is even!");
    else reject("The number is odd!");
});
checkEven
    .then((message) => console.log(message)) // On success
    .catch((error) => console.error(error)); // On failure

Note: The “resolve” and “reject” are not keywords. you can use any name that you want to give to a function.

Syntax

let promise = new Promise((resolve, reject) => {
// Perform async operation
if (operationSuccessful) {
resolve(“Task successful”);
} else {
reject(“Task failed”);
}
});

resolve(value): Marks the promise as fulfilled and provides a result.
reject(error): Marks the promise as rejected with an error.

Let’s See Advanced Promise Methods and Patterns for Effective Async Handling

1. Promise.all() Method

Waits for all promises to resolve and returns their results as an array. If any promise is rejected, it immediately rejects.

JavaScript

Promise.all([
    Promise.resolve("Task 1 completed"),
    Promise.resolve("Task 2 completed"),
    Promise.reject("Task 3 failed")
])
    .then((results) => console.log(results))
    .catch((error) => console.error(error));

Output

Task 3 failed

2. Promise.allSettled() Method

Waits for all promises to settle (fulfilled or rejected) Method and returns an array of their outcomes.

JavaScript

Promise.allSettled([
    Promise.resolve("Task 1 completed"),
    Promise.reject("Task 2 failed"),
    Promise.resolve("Task 3 completed")
])
    .then((results) => console.log(results));

Output

[
  { status: 'fulfilled', value: 'Task 1 completed' },
  { status: 'rejected', reason: 'Task 2 failed' },
  { status: 'fulfilled', value: 'Task 3 completed' }
]

3. Promise.race() Method

Promise.race() Method resolves or rejects as soon as the first promise settles.

JavaScript

Promise.race([
    new Promise((resolve) =>
        setTimeout(() =>
            resolve("Task 1 finished"), 1000)),
    new Promise((resolve) =>
        setTimeout(() =>
            resolve("Task 2 finished"), 500)),
]).then((result) =>
    console.log(result));

Output

Task 2 finished

4. Promise.any() Method

Promise.any() Method resolves with the first fulfilled promise. If all are rejected, it rejects with an AggregateError.

JavaScript

Promise.any([
    Promise.reject("Task 1 failed"),
    Promise.resolve("Task 2 completed"),
    Promise.resolve("Task 3 completed")
])
    .then((result) => console.log(result))
    .catch((error) => console.error(error));

Output

Task 2 completed

5. Promise.resolve() Method

Promise.resolve() Method returns a promise that resolves with the given value.

JavaScript

Promise.resolve("Immediate success")
    .then((value) => console.log(value));

Output

Immediate success

6. Promise.reject() Method

Promise.reject() Method returns a promise that immediately rejects with a given reason.

JavaScript

Promise.reject("Immediate failure")
    .catch((error) => console.error(error));

Output:

Immediate failure

7. Promise.finally() Method

Promise.finally() Method runs a cleanup or final code block regardless of the promise’s result (fulfilled or rejected).

JavaScript

Promise.resolve("Task completed")
    .then((result) => console.log(result))
    .catch((error) => console.error(error))
    .finally(() => console.log("Cleanup completed"));

Output

Task completed
Cleanup completed

8. Chaining with Promise.prototype.then() Method

Allows sequential execution of promises, passing results to the next .then() Method.

JavaScript

Promise.resolve(5)
    .then((value) => value * 2) // Multiplies by 2
    .then((value) => value + 3) // Adds 3
    .then((finalValue) => console.log(finalValue)); // Logs: 13

Output

9. Sequential Execution with Array.prototype.reduce()

JavaScript

let tasks = [1, 2, 3];
tasks.reduce((prevPromise, current) => {
    return prevPromise.then(() => {
        return new Promise((resolve) => {
            console.log(`Processing task ${current}`);
            setTimeout(resolve, 500); // Simulate async task
        });
    });
}, Promise.resolve());

Output

Processing task 1
Processing task 2
Processing task 3

10. Dynamic Promise Creation

Creating and resolving promises dynamically for runtime-based decisions.

JavaScript

function asyncTask(taskName) {
    return new Promise((resolve) => {
        setTimeout(() => 
            resolve(`${taskName} completed`), 1000);
    });
}
asyncTask("Download File").then((result) => 
    console.log(result));

Output:

 Download File completed

11. Timeout Handling with Promise.race() Method

Using Promise.race() Method to set a timeout for a task.

JavaScript

let fetchData = new Promise((resolve) =>
    setTimeout(() =>
        resolve("Data loaded"), 3000));
let timeout = new Promise((_, reject) =>
    setTimeout(() =>
        reject("Timeout!"), 2000));
Promise.race([fetchData, timeout])
    .then((result) =>
        console.log(result))
    .catch((error) =>
        console.error(error));

Output

Timeout!

12. Handling Multiple Failures with Promise.allSettled() Method

Works when you need to process all results, even if some promises fail.

JavaScript

Promise.allSettled([
    Promise.resolve("Task 1 done"),
    Promise.reject("Task 2 failed"),
    Promise.resolve("Task 3 done")
])
    .then((results) => console.log(results));

Output

[
  { status: 'fulfilled', value: 'Task 1 done' },
  { status: 'rejected', reason: 'Task 2 failed' },
  { status: 'fulfilled', value: 'Task 3 done' }
]

13. Combining Promises with Parallel and Sequential Execution

Run some promises in parallel, then process their results sequentially.

JavaScript

Promise.all([
    new Promise((resolve) =>
        setTimeout(() =>
            resolve("Task A done"), 1000)),
    new Promise((resolve) =>
        setTimeout(() =>
            resolve("Task B done"), 500))
])
    .then(([resultA, resultB]) => {
        console.log(resultA, resultB);
        return new Promise((resolve) =>
            setTimeout(() => resolve("Final Task done"), 700));
    })
    .then((finalResult) =>
        console.log(finalResult));

Output

Task A done Task B done
Final Task done

14. Wrapping Callbacks into Promises

Convert callback-based async functions into promises.

JavaScript

function loadData(callback) {
    setTimeout(() => 
        callback("Data loaded"), 1000);
}
function promisifiedLoadData() {
    return new Promise((resolve) => {
        loadData((result) => 
            resolve(result));
    });
}
promisifiedLoadData().then((data) => 
    console.log(data));

Output

Data loaded

Benefits of Promises

Avoid Callback Hell: Promises organize asynchronous code more neatly than nested callbacks.
Error Handling: Errors can be caught in one place using .catch() Method.
Chaining: Perform tasks sequentially with .then() Method.

JavaScript BigInt

N

neerajnegi174

News

Improve

Article Tags :

Similar Reads

JavaScript Tutorial

JavaScript is a programming language used to create dynamic content for websites. It is a lightweight, cross-platform, and single-threaded programming language. JavaScript is an interpreted language that executes code line by line providing more flexibility. HTML adds Structure to a web page, CSS st

翻译：