الوعود (Promises)

الأساسيات

التمرين 1: تأمّل الشيفرة التالية.

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

النتيجة هي: ok

ما الوعد (Promise)؟

الوعد في JavaScript كائن له حالة تتغيّر بحسب نتيجة العملية التي يمثّلها.

التمرين 2: تأمّل الشيفرة التالية.

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

console.log(promise)

النتيجة هي:

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

الوعد المتحقق

تكون حالة الوعد «متحققًا» عندما تنجح العملية التي يمثّلها.

التمرين 3: تأمّل الشيفرة التالية.

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

console.log(promise)

النتيجة هي:

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

الوعد المرفوض

تكون حالة الوعد «مرفوضًا» عندما تكون العملية التي يمثّلها غير ناجحة.

التمرين 4: أنشئ دالة تُرجع الوعد الذي أنشأته في التمرين 3

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

النتيجة هي:

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

التمرين 5: اجعل الوعد المُرجع من checkX يتحقق بعد ثانيتين.

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

النتيجة هي:

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

الوعد قيد الانتظار

تكون حالة الوعد «قيد الانتظار» ما دام لم يتحقق ولم يُرفض بعد.

التمرين 6: أنشئ دالة تستقبل name معاملًا، وتُرجع وعدًا متحققًا إذا كانت قيمة name تساوي Nawras؛ وإلا فتُرجع وعدًا مرفوضًا.

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

النتيجة هي:

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

التمرين 7: أنشئ دالة تستقبل a و b معاملين، وتُرجع وعدًا متحققًا إذا كانت قيمة a أكبر من b ؛ وإلا فتُرجع وعدًا مرفوضًا.

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

النتيجة هي:

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)

إذا تحقق الوعد، فإن الدالة func تُستدعى.

التمرين 8: تأمّل الشيفرة التالية

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

النتيجة هي:

ok

التمرين 9: استخرج قيمة الوعد في التمرين 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)
})

النتيجة هي:

Name is correct

التمرين 10: استخرج قيمة الوعد في التمرين 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); 
})

النتيجة هي:

a is greater than b

---

promise.catch()

promise.catch(func)

إذا رُفض الوعد، فإن الدالة func تُستدعى.

التمرين 11: تأمّل الشيفرة التالية

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

النتيجة هي:

bad

التمرين 12: عالج رفض الوعد في التمرين 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)
})

النتيجة هي:

Name is NOT correct

التمرين 13: عالج رفض الوعد في التمرين 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); 
})

النتيجة هي:

a is NOT greater than b

---

تدريبات

التمرين 14: أنشئ دالة تُرجع وعدًا يتحقق إذا كانت القيمة المُمرّرة سلسلة نصية، ويُرفض في غير ذلك.

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

النتيجة هي:

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

التمرين 15: أنشئ دالة تُرجع وعدًا يتحقق ما دامت القيمة المُمرّرة لا تساوي صفرًا.

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

النتيجة هي:

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