Prerequisites
Before you begin this tutorial you'll need the following:
- IDE (VS Code is used in this tutorial)
- Basic understanding of Javascript ES6
- Nodejs installed, you can get the latest version here.
Introduction
Working with data from other resources has brought the need to deal with asynchronous operations, that is, operations that do not run in sequence. In this post, I explain, in simple terms one of the ways of handling asynchronous operations in Javascript, Promises. By the end of this post, you would understand Javascript Promises in code and simple English.
What are Javascript Promises?
According to the official documentation:
The Promise object represents the eventual completion (or failure) of an asynchronous operation and its resulting value.
SYNTAX:
new Promise((resolve, reject)=>{})
In simpler terms, a Promise is an object that will return a particular value depending on the state of the Promise. A Promise can have one of three states
fulfilled
rejected
pending
Promise fulfilled
A promise has a state of fulfilled
when it is resolved, meaning, nothing went wrong in the Promise and there are no errors. The code snippet below will return a state of fulfilled, because the Promise was resolved:
new Promise((resolve, reject)=>{
resolve(console.log("Hello"))
})
RESULT:
"Hello"
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: undefined
Promise rejected
A promise has a state of rejected
when an error occurs. In this case, the Promise was rejected. The code snippet below will return a state of rejected because the Promise was rejected:
new Promise((resolve, reject)=>{
reject(console.log("Oh no, an error"))
})
RESULT:
"Oh no, an error"
[[PromiseState]]: "rejected"
[[PromiseResult]]: undefined
Promise pending
A promise has a state of pending
when the Promise itself is neither resolved or rejected. The code snippet below will return a status of pending
because the Promise is neither resolved nor rejected:
new Promise((resolve, reject)=>{})
RESULT:
[[PromiseState]]: "pending"
[[PromiseResult]]: undefined
Working with Promises
When working with Promises, you might encounter some methods and functions like the ones below
- The
then
method: This method takes the returned values from a resolved Promise and performs some action on them. Thethen
method is usually chained to the Promise. See an example below:
function getDataFromDatabase(){
return new Promise((resolve, reject)=>{
// promise resolves with no errors
})
}
getDataFromDatabase().then((data)=>{
// data is the returned value from the getFromDatabase function
console.log(data)
})
When working with the then
keyword, it would be helpful to think of it in plain English like this:
First of all, get data from the database with the getDataFromDatabase() function, and then console.log all the data gotten from the database
- The
trycatch
handler: The trycatch handler is very commonly used in working with Promises. Since there is a possibility of your Promise having arejected
status, it would be helpful to add a way to catch that error, which is exactly how the trycatch handler works. See an example below:
function getDataFromDatabase(){
return new Promise((resolve, reject)=>{
try {
// if Promise resolves, return data from the resolve method
resolve()
} catch (error) {
// if the promise rejects, return error data from the reject method
reject(console.log(error.message))
}
})
}
getDataFromDatabase().then((data)=>{
// data is the returned value from the getFromDatabase function
console.log(data)
})
When working with the trycatch
handler, it would be helpful to imagine it in plain English like this
In getting data from the database with the getDataFromDatabase() function, try this code inside this block first, if I successfully get the data, return data from the resolve() function. If I run into some error, return data from the reject function. Then run the function inside the THEN method
Code Example
In this example, we are going to try and simulate making an API call to an external endpoint. The idea is to mimic the delay in getting the data when making an API call. Here are the steps we will want to take into account:
- Create a data store
- Create a function to get the data (imagine the fetch function in Javascript)
- Add new data to the data store when we finally get it
- Log the results to the console
STEP 1: Create a data store
In this example, we will use a simple array to store items, we are mimicing the database here.
let names = ['Kim Seon Ho', 'Park Seo Joon', 'Park Shin Hye', 'Shin Hye Sun']
STEP 2: Create a function to get the data
Here, we will mimic the delay when getting data from a database with the setTimeout() function. This is where we will use a Promise since we want it to run as an asynchronous function in our theoretical project.
function getData(dataItems) {
return new Promise((resolve, reject) => {
try {
setTimeout(() => {
resolve(dataItems)
}, 3000);
}
catch (error) {
reject(console.log(error))
}
})
}
**WHAT IS HAPPENING: **In this snippet of code, we are making sure the getData()
function returns a Promise, so we can use the chaining method that Promises provide to change/edit the data when we get it back from the data store.
STEP 3: Transform the data when we get it
getData(names).then(data=>{
let newName = 'Han Yoo Joo'
data.push(newName)
return data
}).then(finalData=>{
console.log(finalData)
})
*WHAT IS HAPPENING: * Here, we are getting data using the getData()
function. The getData()
function returns information which we store inside the data
parameter of the then
method.
Remember, the then
method takes returned data from the resolved method in a Promise and is able to perform tasks on it. It is this data
that we then push a new name into using the Array.push()
method.
STEP 4: Log the results to the console
The last then
method is unnecessary because we can add the console.log()
method to the first then
method, however, I added it to show you how much chaining you can use when working with Promises in Javascript. In the last then
method, we take data returned from the first then
method and log it to the console.
RESULTS
[
'Kim Seon Ho',
'Park Seo Joon',
'Park Shin Hye',
'Shin Hye Sun',
'Han Yoo Joo'
]
Conclusion
Javascript Promises are a good way of performing asynchronous functions in your code. It is a way better option than facing every Javascript programmers nightmare, callback hell.
You can find the full code examples in this Github repository: code examples
Thanks for reading, see you.
Ciao!
Vanessa O.
❤ If you found this post useful, remember to share and help me grow my community. ❤
PS: If you're looking to start on your tech career this year, you can download this checklist of 14 careers in tech and see the programming language you should learn first.
Top comments (0)