JavaScript Promises

Photo by Joanna Kosinska on Unsplash

I have a promise to make! that after reading this article you will better understand promises in JavaScript :)).

let’s jump right to it!

Promises as described in the JavaScript documentation are a proxy for a value not necessarily known when the promise is created.

they allow you to associate handlers with an asynchronous action's eventual success value or failure reason.

This lets asynchronous methods return values like synchronous methods:

instead of immediately returning the final value, the asynchronous method returns a promise to supply the value at some point in the future.

“A Promise is in one of these states:

  • pending: initial state, neither fulfilled nor rejected.
  • fulfilled: meaning that the operation was completed successfully.
  • rejected: meaning that the operation failed.

A pending promise can either be fulfilled with a value or rejected with a reason (error).

When either of these options happens, the associated handlers queued up by a promise’s then method are called. If the promise has already been fulfilled or rejected when a corresponding handler is attached, the handler will be called, so there is no race condition between an asynchronous operation completing and its handlers being attached.

As the Promise.prototype.then() and Promise.prototype.catch() methods return promises, they can be chained.” -Mozzilla

https://developer.mozilla.org/

And you might be familiar with the following syntax for working with promises in java script:

fetch(API, {
method: "GET",
headers: {
"Content-Type": "application/json",
"Accept": "application/json",
scientificName: this.state.plant.scientific_name
}
})
.then(res => res.json())
.then(data => {
if (data.errors) {
alert(data.errors)
} else {
this.setState({
image_url: data.data.hits[Math.floor(Math.random() * 24)].largeImageURL
})
}
})
}

the Fetch() function takes two arguments a resource and an object with the method and headers.

Since it returns a promise we can call the method then() to parse our response which at this point is still in a form of raw data.

This returns another promise with the already parsed data that we can use in our application or report any errors that might have occurred.

However more recent additions to the JavaScript language include async functions and the await keyword, part of the so-called ECMAScript 2017 JavaScript edition (see ECMAScript Next support in Mozilla).

This means that we can have the same results with a fewer lines of code.

What we do is write an async function to handle our fetch request and promises and instead of calling .then() on the response we can set the response to a variable called response and this is where the await keyword comes into play:

async function getPlants() {  
const response = await fetch(API);
}

Now we can simply call our parsing method on this response variable and Voila!

async function getPlants() {  
const response = await fetch(API);
const json = response.json();
}

These few lines of code replace our previous example and this version is more way more readable and elegant.

From there we can use this data in state or handle any errors,

All we have to do now is call that function and attach a catch callback to it:

getPlants().catch(error => { 
alert(error);
});

And there you have it!

hopefully I’ve fulfilled my promise and you were able to learn something new on promises.

Also check out this article I wrote on fetch().

Thanks for reading!

And remember to follow me for similar content!

--

--

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