How to Make and Use Javascript Promises

Apr 22 · 4 min read
Photo by David Rangel on Unsplash

Javascript promises are just that…promises. They promise to perform a defined action/function and return the result when completed. Javascript promises are great, they allow your application to continue without waiting for the result. Javascript promises are perfect if you use modern front-end frameworks that update the user interface when things change (React, Vue, Angular) and you don’t need the result of the promise in order to proceed to the next action/function.

A function that returns a promise

Promises have two callback functions, each reporting the state of the promise. Resolve is called when the promise is successful, and reject is called when it fails. The parameters passed to these two functions are accessible to the function via .then() and .catch() as shown below.

A promise that returns a shape or an error
(1) How to use a function that returns a promise without async
Using promises with asyncc…await

Now we know how to write a promise, and how to use a promise BUT DO WE? In a previous article, I wrote about the challenges of using Javascript’s Fetch API which returns a promise. Let’s take a look at a similar context.

For example, given an array of shapes “shapes”, and an array of arrays containing integers “values” of the dimensions of the relative shape, we are asked to return an array of the areas of the shapes, or [-1] if a shape isn’t found. For simplicity, we will only allow two shapes. (1) Square. (2) Rectangle

Our calculate area function will look like this…

Calculate the area of a single shape.

Works as expected, we can use this function to calculate all multiple areas as our example instructed. Let’s see what our getAreas function can look like…

getAreas returns an array of areas of shapes given.

This implementation may seem accurate at first sight, but it is not. It will NOT return [-1] as expected if a wrong shape is provided with a set of correct shapes. Given a triangle, the expected output is [-1] but it fails.

Should log [-1] — triangle is a wrong shape

Remember, promises do not wait and execute linearly, thus the parent promise will resolve with areas_array containing the areas of the correct shapes. This is a good example of a place one would need to wait for a promise to resolve or reject before proceeding.

We have already covered how to make use of promises through async…await. So let’s update our function to wait for calculateShape to return each time before proceeding.

getAreas with async…await

On Line 21 we added async and on Line 26 we added await. Our getAreas function will now return the expected output for an array of shapes and array of values. See below for expected test outputs.

The expected output for correct input
The expected output for wrong input

Javascript promises are fun! And dare I say, are everywhere! But it can be a source of pain if you do not understand how to use it accurately/effectively. There’s perhaps a disconnect between how you expect them to work, and how they eventually work. This may be ascribed to previous experiences building synchronous applications. However, once you understand how it works, you will enjoy working with it, I PROMISE.

Don’t wait for that promise to resolve.


Written by

Software Developer. Writes about Javascript, Rails, and tech culture.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade