Promises¶

Basics¶

Task 1: Check the following code.

let x = 100
if (x=== 100){
    console.log("ok")
}else{
    console.log("bad")
}

The result is: ok

What is a promise?

A javascript promise is an object that has a state. The state changes based on the fulfillment of a certain condition/promise.

Task 2: Check the following code.

let x = 100
let promise = new Promise(function(resolve, reject){
    if (x=== 100){
        resolve("ok")
    }else{
        reject("bad")
    }
})

console.log(promise)

The result is:

Promise { "fulfilled" }
    <state>: "fulfilled"
    <value>: "ok"

Fulfilled Promise

A promise state is fulfilled when the introduced promise/condition is fulfilled.

Task 3: Check the following code.

let x = 4
let promise = new Promise(function(resolve, reject){
    if (x=== 100){
        resolve("ok")
    }else{
        reject("bad")
    }
})

console.log(promise)

The result is:

Promise { "rejected" }
    <state>: "rejected"
    <reason>: "bad"

Rejected Promise

A promise state is set to rejected when the introduced promise/condition is not fulfilled.

Task 4: Create a function that returns the promise created in task 3

function checkX(x){
  return new Promise(function(resolve, reject){
        if (x === 100){
            resolve("ok")
        }else{
            reject("bad")
        }
    })
}
console.log(checkX(5))

The result is:

Promise { "rejected" }
    <state>: "rejected"
    <reason>: "bad"

Task 5: Resolve the promise returned from checkX after 2 seconds.

function checkX(x) {
return new Promise(function (resolve, reject) {
    if (x === 100) {
        setTimeout(resolve, 2000, "ok");
    } else {
        setTimeout(reject, 2000, "bad");
    }
});
}
let result = checkX(5);
console.log(result);

The result is:

Promise { "pending" }
    <state>: "pending"

Pending Promise

A promise state is pending when the introduced promise/condition is neither resolved or rejected yet.

Task 6: Create a function that takes name parameter, and it returns a resolved promise if name equals to Nawras; otherwise it returns a rejected promise.

function checkName(name) {
return new Promise(function (resolve, reject) {
    if (name === "Nawras") {
            resolve("Name is correct")  
    } else {
            reject("Name is NOT correct")
    }
});
}
let result1 = checkName("Nawras");
let result2 = checkName("Ali");
console.log(result1);
console.log(result2);

The result is:

Promise { "fulfilled" }
    <state>: "fulfilled"
    <reason>: "Name is correct"
Promise { "rejected" }
    <state>: "rejected"
    <reason>: "Name is NOT correct"

Task 7: Create a function that takes a and b parameters, and it returns a resolved promise if a is greater than b ; otherwise it returns a rejected promise.

function compare(a, b) {
return new Promise(function (resolve, reject) {
    if (a > b) {
            resolve("a is greater than b")  
    } else {
            reject("a is NOT greater than b")
    }
});
}
let result1 = compare(6, -1)
let result2 = compare(6, 11)
console.log(result1);
console.log(result2);

The result is:

Promise { "fulfilled" }
    <state>: "fulfilled"
    <reason>: "a is greater than b"
Promise { "rejected" }
    <state>: "rejected"
    <reason>: "a is NOT greater than b"

promise.then()¶

promise.then(func)

If the promise is fulfilled, func is called.

Task 8: Check the following code

function checkX(x){
  return new Promise(function(resolve, reject){
        if (x === 100){
            resolve("ok")
        }else{
            reject("bad")
        }
    })
}

checkX(100).then(function(value){
        console.log(value)
})

The result is:

ok

Task 9: Get the value of the promise in task 6.

function checkName(name) {
return new Promise(function (resolve, reject) {
    if (name === "Nawras") {
            resolve("Name is correct")  
    } else {
            reject("Name is NOT correct")
    }
});
}

checkName("Nawras").then(function(value){
   console.log(value)
})

The result is:

Name is correct

Task 10: Get the value of the promise in task 7.

function compare(a, b) {
return new Promise(function (resolve, reject) {
    if (a > b) {
            resolve("a is greater than b")  
    } else {
            reject("a is NOT greater than b")
    }
});
}

compare(10, 5).then(function(value){
    console.log(value); 
})

The result is:

a is greater than b

promise.catch()¶

promise.catch(func)

If the promise is rejected, func is called.

Task 11: Check the following code

function checkX(x){
  return new Promise(function(resolve, reject){
        if (x === 100){
            resolve("ok")
        }else{
            reject("bad")
        }
    })
}

checkX(50).catch(function(error){
        console.log(error)
})

The result is:

bad

Task 12: Handle the rejected promise in task 6.

function checkName(name) {
return new Promise(function (resolve, reject) {
    if (name === "Nawras") {
            resolve("Name is correct")  
    } else {
            reject("Name is NOT correct")
    }
});
}

checkName("Ali").catch(function(error){
   console.log(error)
})

The result is:

Name is NOT correct

Task 13: Handle the rejected promise in task 7.

function compare(a, b) {
return new Promise(function (resolve, reject) {
    if (a > b) {
            resolve("a is greater than b")  
    } else {
            reject("a is NOT greater than b")
    }
});
}

compare(0, 5).catch(function(error){
    console.log(error); 
})

The result is:

a is NOT greater than b

Some Practice¶

Task 14: Create a function that returns a promise. The promise is fulfilled if the provided value is a string. Otherwise; it is rejected.

function isString(val) {
    return new Promise((resolve, reject) => {
        if (typeof val === "string") {
            resolve(`yes, ${val} is a string`);
        } else {
            resolve(`no, ${val} is not a string`);
        }
    });
}

isString(5)
    .then((val) => console.log(val))
    .catch((err) => console.log(err));
isString("ali")
    .then((val) => console.log(val))
    .catch((err) => console.log(err));

The result is:

no, 5 is not a string
yes, ali is a string

Task 15: Create a function that returns a promise. The promise is fulfilled as long as the provided value does not equal to zero.


function isNotZero(val) {
    return new Promise((resolve, reject) => {
        if (val !== 0) {
            resolve(`yes, ${val} is not equal to zero`);
        } else {
            reject(`no, ${val} is equal to zero`);
        }
    });
}

isNotZero(5)
    .then((val) => console.log(val))
    .catch((err) => console.log(err));
isNotZero(0)
    .then((val) => console.log(val))
    .catch((err) => console.log(err));

The result is:

yes, 5 is not equal to zero
no, 0 is equal to zero