JavaScript Promises: A Journey from Callbacks to Custom Implementation

How Life Was Before Promises?

Before the introduction of promises in JavaScript, handling asynchronous operations was a cumbersome and error-prone process. Developers relied heavily on callbacks, which often led to "callback hell" or "pyramid of doom," where nested callbacks became difficult to manage and read. This made the code harder to maintain and debug, especially as the complexity of the application grew.

For example, consider the following scenario: You need to perform three asynchronous operations sequentially. In the callback-based approach, you'd end up nesting the functions, leading to deeply indented code that's difficult to follow.

This pattern not only makes the code harder to read but also complicates error handling since each callback needs to manage its own errors.

Why does the concept of Promises Come to JavaScript?

Promises were introduced in JavaScript to solve the problems associated with callback-based asynchronous programming. A promise represents a value that may be available now, or in the future, or never. It allows you to chain asynchronous operations in a more readable and maintainable way, avoiding deeply nested callbacks.

Promises provide a clean way to handle asynchronous tasks, making the code easier to write, read, and maintain. They also offer a unified approach to error handling, allowing errors to be caught at a single point in the chain.

How Promises Made Life Easier: An Example

With promises, the previous example can be rewritten as follows:

In this example, the code is linear and easy to follow. Each then block handles the result of the previous operation, and the catch block handles any errors that occur during any of the asynchronous operations.

How Promises Use Callbacks Under the Hood

Despite their clean syntax, promises are essentially a wrapper around callbacks. When you create a promise, you pass an executor function to it, which receives two arguments: resolve and reject. These functions are callbacks that the promise uses to transition from a pending state to either a fulfilled or rejected state.

Under the hood, promises manage the state and the callback queue. When a promise is fulfilled or rejected, it processes the queued callbacks and passes the resolved value or error to them.

Implementation of JavaScript Promises

Here's a custom implementation of JavaScript promises using a class named Promise2. This implementation illustrates how promises manage state, handle callbacks, and provide a chainable interface.

Usage Example

This implementation demonstrates the basics of how promises work in JavaScript. The Promise2 the class manages the state of the promise, queues callbacks, and processes them when the promise is fulfilled or rejected.

Implementing the Fetch function using Promise2

The fetch function is a modern JavaScript API for making HTTP requests. It is used to request resources from a network server and handle responses.

In the implementation of fetch2, we require a library for making HTTP requests and the fetch function returns a Promise2 object that is in a pending state until the request is either rejected or fulfilled.

Fetch2 usage example

This concludes the article, where we explored the concept of promises, examined how they function internally, and gained insights into how fetch operates under the hood.

I've also published this article on Hashnode, which offers better code visibility and the ability to easily copy code snippets. [ Click Here To Read ]