Promises in JavaScript

A promise in JavaScript is like a promise in real life. If you promise to do something, that promise may have actually two result:

• Promise is completed (resolved)

• Promise is failed (rejected)

For example: If I promise to write a post about promises in JavaScript either I write it or not. If I write it it is resolved, if I do not write it it is rejected.

But why do we need promises in JavaScript?

It is useful to use promises instead of callback functions if we have many nested callback functions. (Some developers calls it callback hell).

Because we need to use only .then and .catch methods in order.

Show me the code!

Let’s see on action. In order to use it let’s define a promise in JavaScript with new Promise keywords.

First we will define a promise and then we need to define what to do when it is resolved or rejected.

let myPromise = new Promise((resolve, reject) => {
//Let's define a variable in order to have true/false
//situation so we can have resolved an rejected states
let a = 5 + 5; 
if (a === 10) {
resolve('Success'); 
} else {
reject('Failed');
}
});

In our example a = 10. It is always resolved so it will pass the message when we run .then() method. We will see it in detail with next example below.

How Do We Interact With Promise?

Now we have a promise but how do we use it actually. How do we interact with this promise?

with .then() and .catch() methods of course!

Anything in myPromise.then() method will run for resolve.

//This is goint to run when the promise is resolved.
myPromise.then((message) => { 
console.log("This is in .then " + message);
});

This code will run for the resolve so we will se “Success” message with the as result.

Similarly anything in myPromise.catch will run for the rejection.

myPromise.catch((message) => {
console.log("This is in .catch " + message);
});

What if We Have More Promises?

In order to run a .then() method for all promises in an array we can use Promise.all method. If all the promises in the array are resolved .then() method will run with all the messages defined in promises resolves.

const recordVideoOne = new Promise((resolve, reject)=> {
resolve("Video 1 Recorded");
});
const recordVideoTwo = new Promise((resolve, reject)=> {
resolve("Video 2 Recorded");
})
const recordVideoThree = new Promise((resolve, reject)=>{
resolve('Video 3 Recorded');
})
Promise.all([recordVideoOne, recordVideoTwo, recordVideoThree]).then((messages) => {
console.log(messages);
});

If I Don’t Want To Wait All Of Them To Finish?

But what if we do not want to wait all of them to be completed and resolved. Similarly we can use Promise.race() method for this. With this method we can understand which method completed first.

Promise.race([
recordVideoOne,
recordVideoTwo,
recordVideoThree,
]).then((message) => {
console.log("Hepsi kaydedildi!" + message);
});

Thank you everyone who has read until here! I will be more than happy if this is useful for anyone. I’m still learning and tried to document my notes taken during the tutorial. Credits to Web Dev Simplified Youtube channel.

Please find me on twitter it you want to connect: https://twitter.com/yc_crypto