Understanding JavaScript Promises

What are JavaScript promises? #

Many people struggle with understand how Promises work (including me). Promises are fundamental to asynchronous coding in JavaScript. In this post we try to understand promises with basic examples.

Basic Example #

let testPromise = new Promise((resolve, reject) =>{
let a = 1 + 1;
if (a == 2){
resolve("Success")
} else {
reject("Fail")
}
});

testPromise.then((result) => {
console.log("This is then: " + result);
}).catch((result) => {
console.log("This is catch: " + result);
});

Moderate Example #

const userLeft = false;
const userWatchingMeme = true;

function watchTutorialPromise() {
return new Promise((resolve, reject) => {
if(userLeft){
reject({
name: "User Left",
message: "Farawell! :("
})
} else if(userWatchingMeme){
reject({
name: "User busy with memes",
message: "Let's wait her :/"
})
} else {
resolve("My dear friend! You're here ♥");
}
})
};

watchTutorialPromise().then((message) => {
console.log("Success: " + message)
}).catch((error) => {
console.log(error.name + " " + error.message);
});

Promise.all() #

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);
});

// With setTimeout

const promise1 = new Promise((resolve, reject) => {
resolve(1);
});
const promise2 = new Promise((resolve, reject) => {
setTimeout(resolve(2), 100);
});
const promise3 = new Promise((resolve, reject) => {
setTimeout(resolve(3), 100);
});
Promise.all([
promise1,
promise2,
promise3
]).then((messages) => {
console.log("All Resolved. " + messages);
});

Promise.race() #

const promise1 = new Promise((resolve, reject) => {
setTimeout(resolve(2), 100);
});
const promise2 = new Promise((resolve, reject) => {
resolve(1);
});
Promise.race([
promise1,
promise2
]).then((res) => {
console.log(res);
})
Previous Post

Understanding JavaScript Callbacks

Callbacks are fundamental to asynchronous coding in JavaScript. In this post we try to understand callbacks with several examples.

Read article