I’ll explain Promises, I promise!

Mzthomas
3 min readMar 9, 2021

In JavaScript, a promise is an object that contains the future value of an asynchronous operation. So before we can explain promises, we have to know more about asynchronous Javascript.

In a synchronous programming model, things happen one at a time. When you call a function that performs a long-running action, it returns only when the action has finished and it can return the result. This stops your program for the time the action takes.

An asynchronous model allows multiple things to happen at the same time. When you start an action, your program continues to run. One approach to asynchronous programming is to make functions that perform a slow action take an extra argument, a callback function. The action is started, and when it finishes, the callback function is called with the result. As an example, the setTimeout () function waits a given number of milliseconds (a second is a thousand milliseconds) and then calls a function.

Working with abstract concepts is often easier when those concepts can be represented by values. In the case of asynchronous actions, you could, instead of arranging for a function to be called at some point in the future, return an object that represents this future event.

This is what the standard class Promise is for. A promise is an asynchronous action that may complete at some point and produce a value. It is able to notify anyone who is interested when its value is available.Sometimes, when you work with webservers and requesting some data from a webserver, the Javascript promise promises us to get data from webserver and you can use in the future.

The Promise object represents the eventual completion (or failure) of an asynchronous operation and its resulting value.

Promises provides us a simpler alternative to executing, composing and managing asynchronous operation compared to the traditional callback-bases approach.

When working with Promises, we must be aware of what it’s current state. There are three states, Pending, Fulfilled and Rejected.

When a Promise is Pending, it can transitioned to either Fulfilled or Rejected. Once a Promise transitions to either Fulfilled or Rejected, it cannot transition to any other state and it’s value will not change as well.

When a Promise is Fulfilled, this means the asynchronous operation has completed and the Promise has a value. When a Promise is Rejected, this means the asynchronous operation has failed, and the Promise will never be fulfilled.

To get the result of a promise, you can use its then method.Here’s the magic: the then function returns a new promise, different from the original:

The most common use of chaining promises is with the fetch method.

Let’s take a look at the code above. fetch returns a promise. Since it returns a promise we can use then again. We want to console log the book JSON object from the initial response so we use the .json() method. Our final promise is returned after two then calls, and we get what we want.

--

--