What is a Promise in JavaScript?

Michael Tong
Oct 5, 2020 · 5 min read
What is a Promise in JavaScript?
What is a Promise in JavaScript?
Photo by Xu Haiwei on Unsplash

That’s right! Promise is all about waiting for feedback.

Today we will be talking what a promise is and also about the following types of promises:

  • promise.all
  • promise.allSettled
  • promise.any
  • promise.race

Before we talk about any of this, let’s understand what a promise is.

A promise is an object that will return a resolved object or reject an object sometime in the future.

To put it simply, a request is made and this request, once completed, will tell us if it is successful or not.

Let’s look at the following example:

Hm…where are the promises? Sure, I am fetching data but I am not seeing the “promise” keyword.

That’s because the fetch call itself returns a promise. Promise has two functions, one is called then and the other one is called catch.

When we fetch a URL and call .then, we are offering a function as a parameter, where the function takes in the response returned by the fetch call. Here, we get the data from the API successfully and we generally set it to some local state to store this piece of information.

Quick question: why do we trigger two .then calls?

With fetch calls, if successful, returns a promise with the response. But this response is not formatted in a way our UI can consume. As a result, we need to call res.json(), which returns another successful/resolved response with the data we need.

.catch is another method the promise contains. This function accepts a function with error as its parameter. This error is provided by the promise when it throws a reject value(or in normal English term, the API call failed).

Now we understand how a promise works. Let’s revisit the following type of promise calls:

  • promise.all
  • promise.allSettled
  • promise.any
  • promise.race
Image for post
Image for post
Photo by Mimi Thian on Unsplash

Promise.all

Promise.all takes in a set of promises and returns a promise that will resolve to success if all of these promises resolve. If any of the promises fail, then Promise.all will return a reject/failed promise.

Here’s an example of a successful and failed Promise.all example:

When’s a good time to use Promise.all?

Let’s say you have a list of API calls that have to occur in a sequential order. Generally, you have to chain all these promises in the following manner:

What if we have to toggle around 10, or maybe even 20 promises? If one of these promises in the chain is not set up properly, it will be a pain to go through the list of promises and find the problematic one. Most importantly, if all these promises are dependent on each other to execute properly, then promise.all is best fit for this kind of scenario.

Image for post
Image for post
Photo by airfocus on Unsplash

Promise.allSettled

With a given array of promises, Promise.allSettled resolves automatically when all the promises have either been resolved or rejected.

Here’s an example of promised.allSettled:

One key point, Promise.allSettled never returns any failed promises, regardless of their results of individual promises.

One might ask: when are promise.allSettled used?

Image for post
Image for post
Photo by Jen Theodore on Unsplash

Let’s say you have a software application and you have to install a set of software to finishing install one big software. If all of these software are not installed properly, then you cannot say your overall installation is complete. As a result, you need to use promise.allSettled to ensure certain actions can be taken(for example, throwing a popup either saying the installation is complete or failed) if and only if all the promises are either resolved or rejected.

Promise.Any

Image for post
Image for post
Photo by Anne Nygård on Unsplash

Given several promises, Promise.any returns a promise if any one of the promises resolves/fulfills. It returns a rejected promise if all of these promises are rejected.

Let’s take a further look at the following example:

Here we have three scenarios: one with all success promises, one with a success promise followed by a failed promise, and another one with all failed responses.

As you can see, Promise.any with promise 1 and 2 and promise 5and 6 have succeed while Promise.any with promise 3 and 4 failed.

Quick Question: where do we use promise.any?

Let’s say you are on a chess gaming application waiting to match up with any players online. Behind the scene, the application might be making multiple API calls for all the players within the radius.

Once you are matched up with a player, does it matter if you are matched up with all the other players out there? Not really. You can imagine a match up as an API call that will return a promise. Once any of the promise returns (getting matched up to a player in a chess game), the rest doesn’t matter even if you are able to match up with other players.

Promise.race

Image for post
Image for post
Photo by Jonathan Chng on Unsplash

Promise.race returns a promise as soon as one of the promises either rejects or fulfills, with the result being the value/reason of the promise that resolves/rejects first.

Let’s take a look at the following example:

Over here, we set PromiseTwo to execute after 6000 ms on timeout. As a result, Promise one gets executed first, and as a result Promise.race returns a resolved value.

On the other hand, promiseFour executes before promiseThree does. As a result, Promise.race returns a failed promise as a result of promiseFour being executed first.

That’s it! We just covered different types of promises in javascript.

Weekly Webtips

Explore the world of web technologies through a series of tutorials

Sign up for 💌 Weekly Newsletter

By Weekly Webtips

Get the latest news on the world of web technologies with a series of tutorial Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Michael Tong

Written by

Coding is nothing but a renovation of ideas through fundamental concepts. Stay sharp and stay hungry to learn!

Weekly Webtips

Explore the world of web technologies through a series of tutorials

Michael Tong

Written by

Coding is nothing but a renovation of ideas through fundamental concepts. Stay sharp and stay hungry to learn!

Weekly Webtips

Explore the world of web technologies through a series of tutorials

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store