A Foundational Guide On JavaScript Promises

A Promise is a declaration or assurance that one would do something or that a particular thing would happen. in this tutorial I am making a promise to give you the best JavaScript Promises explanation that you'll find anywhere on the web!

What are Javascript Promises?

Promises in Javascript is a system of defining Callback functions it makes it alot easier because nesting a callback function can lead to alot of problems in your code which programmers often refer to as "Callback Hell!". Promises are very useful when you want to execute something that could probably take a long time in the background such as:

Image loading
Handling API requests
File and Database operations

Instead of making everything else wait for it you could just use a promise that would give feedback if it was successful or if there were any errors.

Promise (Pending)

Resolve (Fulfilled)

Reject (Rejected)

Now that you understand what JavaScript Promises are all about....lets dive in deeper!

The promise syntax.

// Example 1
let p = new Promise(function(resolve,reject)) {/** somecode **/})
// Example 2
let p = new Promise((resolve,reject))=>{/** somecode **/})

The code shows the normal declaration of a Promise and the JavaScript shorthand syntax.

Breaking It Down

p is a variable taking a promise as it's value
A promise takes one parameter
The parameter taken is a function
the function now takes two parameters one for success and the other for failure
the parameter for success is identified as resolve
the parameter for failure is identified as reject

Got that? You are Amazing! now let's progress into something more complex!....I'm sure you can handle it :)

My first promise code.

let keep = new Promise(function(resolve,reject)) {
let a = 2 + 2;
if (a == 4) {
resolve("success");
}
else {
reject("failure");
}
})

The above shows a good beginners example of what a promise looks like.

***Breaking It Down***

A promise is declared as the value of the variable called "keep" (remember that promises take a function as the parameter); now "some code" has been finally passed to that function that if a equals 4 the promise is resolved else the promise is rejected.

***We're almost there!, If you managed to come this far your a champion!!***

Promises in action.

The ".then" and ".catch"

This looks like the most complex part of the promise saga but it's actually a very easy concept to understand. the then and catch are methods for the parameters resolve i.e(success) and reject i.e(failure).
".then" would only run if the promise was kept and ".catch" would only run if the promise was not kept.

How does "then" and "catch" work?

then and catch are methods that takes functions as parameters;
in the image below, then takes a function as it's parameter, that function now takes one parameter called msg.
msg is now the function parameter of then since then is a method for resolve, msg will now output whatever code we have put in the resolve() of the promise. in our example, the code we put is a string called "success".

let keep = new Promise(function(resolve,reject)) {
let a = 2 + 2;
if (a == 4) {
resolve("success");
}
else {
reject("failure");
}
})
keep.then=(function(msg) {
console.log("The promise was a "+ msg)
}).catch.function(msg) {
console.log("The promise was a "+ msg)
}) // outputs success because 2 + 2 is 4

Here the promise was kept and the code outputs "the promise was a success".

catch basically does the same thing, just that since the .catch is used for reject the function parameter would return whatever code we put in reject(). in our example the code we put is a string called "failure".

let keep = new Promise(function(resolve,reject)) {
let a = 2 + 3;
if (a == 4) {
resolve("success");
}
else {
reject("failure");
}
})
keep.then=(function(msg) {
console.log("The promise was a "+ msg)
}).catch.function(msg) {
console.log("The promise was a "+ msg)
}) // outputs failure because 2 + 3 is not 4

Here the promise was Not kept and the code outputs "the promise was a failure"

Summary

JavaScript Promises are important in web development, they help to simplify the handling of asynchronous operations.
They can be used to execute code specifying what should happen if the promise is fulfilled .then() or incase of errors .catch(), .finally() is used to execute code regardless of the outcome. This entire approach helps make asynchronous code more readable and maintainable.

Dukespot.co