Promise Handling in JS

Introduction

Promise is a powerful feature in JavaScript introduced in ES6 (ECMAScript 2015) to effectively deal with asynchronous operations and avoid the infamous "callback hell". This article covers several promise handling features in JavaScript: creation, chaining, error handling, and advanced techniques.

Understanding Promises

A promise in JavaScript represents a value that may be available now, later, or never. It can be in one of three states:

Pending: The initial state, neither fulfilled nor rejected.
Fulfilled: Operation was successful.
Rejected: The operation did not succeed.

Creating a Promise

A promise is made with the Promise constructor by providing an executor function that takes two parameters: resolve and reject.

let promise = new Promise((resolve, reject) => {
    // Asynchronous operation
    setTimeout(() => {
        let success = true;
        if (success) {
            resolve("Operation successful");
        } else {
            reject("Operation failed");
        }
    }, 1000);
});

Consuming Promise

To consume a promise, you use the .then() and .catch() methods.

Using .then()
The .then() method can take two arguments: a callback function for the fulfilled case and another for the rejected case.

promise.then((message) => {
    console.log(message); // "Operation successful"
})

Chaining Promise

Promises are chained, one after the other, to make a sequence of asynchronous operations. Each time the .then() method is called, it returns a new promise with the result of the previous one for further chaining.

promise.then((message) => {
    console.log(message);
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve("Another operation successful"), 1000);
    });
}).then((secondMessage) => {
    console.log(secondMessage);
})

Error Handling

Proper error handling is an important part of using promises correctly. The .catch() method is a way of handling an error that might have occurred through the promise chain.

Using .catch()
The .catch() method can be appended to the end of a chain of promises to catch errors that might occur.

promise.then((message) => {
    console.log(message);
    throw new Error("Something went wrong!");
}).catch((error) => {
    console.error(error.message); // "Something went wrong!"
});

Using .finally()

The .finally() method is used to execute a piece of code regardless of whether the promise was fulfilled or rejected.

promise.finally(() => {
    console.log("Promise has been settled (fulfilled or rejected).");
});

Advance Techniques

Promise.all()

Promise.all() takes an array of promises and returns a new promise that resolves when all the promises in the array have resolved or rejects when any one of the promises rejects.

let promise1 = Promise.resolve("First promise");
let promise2 = new Promise((resolve) => setTimeout(resolve, 1000, "Second promise"));
let promise3 = Promise.resolve("Third promise");

Promise.all([promise1, promise2, promise3]).then((values) => {
    console.log(values); // ["First promise", "Second promise", "Third promise"]
}).catch((error) => {
    console.error(error);
});

Promise.race()

Promise.race() returns a promise that resolves or rejects as soon as one of the promises in the array resolves or rejects.

let promise1 = new Promise((resolve) => setTimeout(resolve, 500, "First promise"));
let promise2 = new Promise((resolve) => setTimeout(resolve, 100, "Second promise"));

Promise.race([promise1, promise2]).then((value) => {
    console.log(value); // "Second promise"
}).catch((error) => {
    console.error(error);
});

Promise.allSettled()

Promise.allSettled() returns a promise that resolves after all of the given promises have either resolved or rejected, with an array of objects that each describes the outcome of each promise.

let promise1 = Promise.resolve("First promise");
let promise2 = Promise.reject("Second promise failed");
let promise3 = Promise.resolve("Third promise");

Promise.allSettled([promise1, promise2, promise3]).then((results) => {
    results.forEach((result) => console.log(result.status));
    // Output:
    // "fulfilled"
    // "rejected"
    // "fulfilled"
});

Promise.any()

Promise.any() takes an array of promises and returns a single promise that resolves as soon as any of the promises in the array fulfills, ignoring rejected promises. If all the promises are rejected, it returns a rejected promise with an AggregateError.

let promise1 = Promise.reject("First promise failed");
let promise2 = Promise.reject("Second promise failed");
let promise3 = Promise.resolve("Third promise");

Promise.any([promise1, promise2, promise3]).then((value) => {
    console.log(value); // "Third promise"
}).catch((error) => {
    console.error(error);
});

Conclusion

Promises are a clean and powerful way to handle asynchronous operations in JavaScript. Compared to more traditional, callback-based approaches, they enable you to write cleaner, more readable, and maintainable code. At present, the ability to create, consume, and handle promises has been augmented with advanced techniques, including Promise.all() and Promise.race(). Mastering the art of promises will enable you to write powerful, efficient, and error-resistant asynchronous code while paving the way for robust application development.

Frequently Asked Questions