DEV Community: Chirath Nissanka

All about promises!

Chirath Nissanka — Wed, 12 Feb 2025 04:41:59 +0000

Here is a deep dive into all the abilities of promises in ES6+.

A Promise in JavaScript is an object representing the eventual completion (or failure) of an asynchronous operation. It has several built-in functions that allow handling asynchronous tasks efficiently.

Let's dive deep into all the functions of a Promise:

1. Creating a Promise

A Promise is created using the new Promise constructor:

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

The executor function takes two arguments:

resolve(value): Marks the Promise as fulfilled and returns a value.
reject(error): Marks the Promise as rejected with an error.

Here's an example of a promise in action:

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = true; // Change this to false to simulate an error
      if (success) {
        resolve("Data fetched successfully!");
      } else {
        reject("Error fetching data.");
      }
    }, 2000); // Simulate network delay
  });
}

fetchData()
  .then((result) => {
    console.log(result); // "Data fetched successfully!"
  })
  .catch((error) => {
    console.error(error); // "Error fetching data."
  });

Methods in promises

resolve
reject
all
allSettled
race
any

Resolve 🚀

Returns a resolved Promise with the given value.

const resolvedPromise = Promise.resolve("Resolved!");
resolvedPromise.then(console.log); // "Resolved!"

Reject 🚀

Returns a rejected Promise with the given error.

const rejectedPromise = Promise.reject("Rejected!");
rejectedPromise.catch(console.error); // "Rejected!"

All 🚀

Waits for all Promises in an array to resolve. If one fails, the entire chain rejects.

const p1 = Promise.resolve(1);
const p2 = new Promise((resolve) => setTimeout(resolve, 1000, 2));
const p3 = Promise.reject("Error!");

Promise.all([p1, p2, p3])
  .then(console.log)
  .catch(console.error); // "Error!"

allSettled 🚀

Waits for all Promises to settle (resolve or reject), returning an array with results.

Promise.allSettled([p1, p2, p3]).then(console.log);
/*
[
  { status: "fulfilled", value: 1 },
  { status: "fulfilled", value: 2 },
  { status: "rejected", reason: "Error!" }
]
*/

race 🚀

Returns the first Promise that settles (either resolve or reject).

const fast = new Promise((resolve) => setTimeout(resolve, 500, "Fast!"));
const slow = new Promise((resolve) => setTimeout(resolve, 1000, "Slow!"));

Promise.race([fast, slow]).then(console.log); // "Fast!"

any 🚀

Returns the first fulfilled Promise, ignoring rejections. Rejects only if all fail.

const fail1 = Promise.reject("Fail 1");
const fail2 = Promise.reject("Fail 2");
const success = new Promise((resolve) => setTimeout(resolve, 300, "Success!"));

Promise.any([fail1, fail2, success]).then(console.log).catch(console.error); // "Success!"

Callbacks, promises, and async/await!

Chirath Nissanka — Wed, 12 Feb 2025 04:26:46 +0000

Callbacks, promises, and async/await are all related to asynchronous programming.

Asynchronous programming is a crucial concept in modern development, especially for handling tasks like API calls, file reading, database queries, and UI interactions without blocking execution. Here’s a comprehensive list of topics covering all aspects of asynchronous programming:

Callbacks

Functions passed as arguments to other functions, executed after an operation completes.

function fetchData(callback) {
  setTimeout(() => {
    callback("Data received");
  }, 2000);
}
fetchData(console.log); // Logs "Data received" after 2 seconds

Problems

Callback Hell (Nested callbacks, difficult to read and maintain)
Inversion of Control (Less predictable flow)

What is Callback Hell?

Callback Hell refers to the situation where multiple nested callbacks make the code hard to read, maintain, and debug. This happens when dealing with multiple asynchronous operations that depend on each other, leading to deeply nested structures.

Example

Imagine we need to execute multiple async tasks in sequence, such as:

1. Fetch user data from a database.
2. Get the user's orders.
3. Process the payment.
4. Send a confirmation email.

Using callbacks, the code might look like this:

getUser(1, (user) => {
    console.log("User fetched:", user);

    getOrders(user.id, (orders) => {
        console.log("Orders fetched:", orders);

        processPayment(orders, (paymentStatus) => {
            console.log("Payment processed:", paymentStatus);

            sendConfirmationEmail(user.email, (emailStatus) => {
                console.log("Email sent:", emailStatus);
            });
        });
    });
});

This causes the following issues:

Readability Issues → Hard to follow the flow of execution.
Difficult Debugging → Errors are harder to trace in deeply nested code.
Scalability Issues → Adding more async steps makes it worse.
Error Handling Challenges → Each callback needs its own error handling logic.

Why is inversion of control (IoC) bad in callbacks?

In callback-based asynchronous programming, Inversion of Control (IoC) means that we pass a callback to another function, and we lose control over when, how, and even if it gets executed. This can lead to several issues:

Loss of Execution Control
Callback Hell (Nested Callbacks)
Error Handling is Difficult
Hard to Compose and Reuse Functions
Difficult to Handle Multiple Async Operations

We will talk in depth about the architectural challenges in these problems later for system design, but for now, know that these two problems are the main motivation for promises & async/await!

Promises & async/await are solutions to the problems caused by callbacks.

Promises can be implemented in any language, and async/await is just syntactical sugar!

What are promises?

A Promise in JavaScript is an object that represents the eventual completion (or failure) of an asynchronous operation. It acts as a placeholder for a value that isn’t available yet, but will be resolved in the future.

Before Promises, we used callbacks to handle asynchronous code. However, callbacks led to callback hell, making the code difficult to read, debug, and maintain.

Promises solve these problems by:

✅ Making asynchronous code more readable
✅ Providing a cleaner chaining mechanism (.then())
✅ Simplifying error handling (.catch())
✅ Allowing multiple asynchronous tasks to run in parallel (Promise.all())

Closer look into promises

A "promise" is an object that can be in 3 states, at a time.

Pending -> The initial state, waiting for completion
Fulfilled -> The async operation completed successfully
Rejected -> The async operation failed

Once a Promise is settled (fulfilled or rejected), it cannot change its state.

How to create a promise?

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

resolve(value): Called when the operation is successful.
reject(error): Called when the operation fails.

const myPromise = new Promise((resolve, reject) => {
    let success = true;
    setTimeout(() => {
        if (success) {
            resolve("Operation successful!");
        } else {
            reject("Operation failed!");
        }
    }, 2000);
});

console.log(myPromise); // Outputs: Promise { <pending> }

Promises in action

To handle the result of a Promise, we use:

.then() → Runs when the promise is fulfilled.
.catch() → Runs when the promise is rejected.
.finally() → Runs regardless of success or failure.

myPromise
    .then((result) => {
        console.log("Success:", result);
    })
    .catch((error) => {
        console.log("Error:", error);
    })
    .finally(() => {
        console.log("Promise completed!");
    });

Now async/await in the next step in this - make the code even readable and short, by removing then/catch chaining in promises.

Async/Await - Syntax Sugar

async function fetchData() {
    try {
        const data = await myPromise;
        console.log("Data:", data);
    } catch (error) {
        console.log("Error:", error);
    } finally {
        console.log("Done!");
    }
}

fetchData();

Benefits of async/await:

✅ Looks like synchronous code (easier to read)
✅ No need for .then() chaining
✅ Error handling with try...catch

Best Practice: Use async/await for modern, clean, and maintainable code.

Thanks for reading - let's talk soon,

Chirath!