1,038 reads

JavaScript Promises from Scratch

by Jaskirat Singh GrewalJuly 1st, 2020

Too Long; Didn't Read

Promises are used in JavaScript to handle the state of a Promise. They are special objects that link the actual output and the reason due to which we may not get the output. Promises can be a bit of hectic stuff if you don't have experience with callbacks and callback hells. Once you grasp this concept, there is no going back! The then and catch clauses can be used to create a promise. The promise constructor is a callback of the promise constructor. It takes two callbacks: resolve and reject callbacks. It sends the value sent through method as an argument.

Company Mentioned

featured image - JavaScript Promises from Scratch

To get the most out of this article, please make sure that you know basics about Synchronous and Asynchronous Programming and, if possible, about javascript callbacks.However, I will try to keep most of the stuff away from these topics so that you can understand at least 85% of it.

Understanding Promises

Suppose a friend comes to you for financial help and you promise him to give some cash after taking it out from an ATM.

You go to the ATM, swipe your card, and find out that your account has been frozen due to some reasons and you can't take out your money.
Then, you go back to your friend and tell him that you can't give him money because your account is frozen. Hence, breaking your promise.

//You have made promise to your friend and you leave for bank
if (everythingGoesWell) {
return theMoney //Promise is fulfilled
}
else {
return "Account_Frozen" //Promise failed
}

Promises are used in JavaScript to handle

async

operations. They are special objects that link the actual output (in the above example, it's required money) and the reason due to which we may not get the output (Account Frozen).

States of a Promise

A JavaScript

 promise

is either

settled

pending

. We can use the

Promise

constructor to create a

promise

var thePromise = new Promise(executor())

The executor function is a callback of the promise constructor. It takes two callbacks:

resolve

and

reject

, as arguments.

The
```
resolve
```
callback is used when the
```
promise
```
is actually fulfilled. It takes the output value as its argument.
The
```
reject
```
callback is used when the
```
promise
```
couldn't be fulfilled. It takes the reason as its argument.

When we create a

promise

it initializes in its

pending

state. Once the executor runs, the state changes to

settled

which can be either

resolved

rejected

Implementation: Code Snippet

var thePromise = new Promise(function(resolve,reject){
// Try to take out money from atm
withdraw(function(error,money) {
// If withdrawal failed, tell why
if (error) reject (error)
// else return the money
else resolve (money)
})
})

Promises can be a bit of hectic stuff if you don't have experience with callbacks and callback hells. But once you grasp this concept, there is no going back!

The

then

and

catch

clauses

The

catch

promise

promise

reject

The

then

promise

promise

resolve

There is a

finally

promise

var thePromise = new Promise(function(resolve,reject){
// Try to take out money from atm
withdraw(function(error,money) {
// If withdrawal failed, tell why
if (error) reject (error)
// else return the money
else resolve (money)
})
})

thePromise.then(function(money) {
// This function is executed when the above promise resolves and returns an //amount of money
})

thePromise.catch(function(error) {
// This function is executed when the above promise rejects due to an error
})

thePromise.finally(function() {
// This function is executed after the promise is resolved or rejected.
})

Jaskirat S. Grewal (@thejscode)

Previously published at

L O A D I N G
. . . comments & more!