في هذا الدرس 6تصفّح المواضيع
Promise : هو عبارة عن عنصر نستخدمه في تنفيذ كود مع الانتظار الي ان يتم تنفيذ كود اخر وتتكون عملية ال promise من شقين اساسين وهم
- Producing code : وهو الكود الذي يقوم بأرجاع نتيجة معينة
- Consuming code : وهو الكود الذي سوف ينظر الحصول علي النتيجة ليتم تنفيذه
- نستطيع استخدام ال Promise عن طريق استخدام ال object التالي "Promise " وهي يأخذ اثنين من ال arguments وهما كل من ال "Producing code " وال " Consuming code "
Promise Syntax
let myPromise = new Promise(function(myResolve, myReject) {
/* "Producing Code" (May take some time) */
myResolve(); /* when successful */
myReject(); /* when error */
});
/* "Consuming Code" (Must wait for a fulfilled Promise) */
myPromise.then(
function(value) { /* code if successful */ },
function(error) { /* code if some error */ }
);
عندما يتم تنفيذ الكود وارجاع نتيجة فسوف يتم تنفيذ دالة معينة بناء علي هذه النتيجة من احدي النتيجتين التاليتين
- success : في حالة كانت هذه هي النتيجة فسوف يتم تنفيذ الدالة ( )myResolve
- Error : في حالة كانت هذه هي النتيجة فسوف يتم تنفيذ الدالة ( )myReject
يمكن ان يكون ال object ا "promise " احدي الحالات التالية
- Pending ( قيد تنفيذ الكود ) وتكون النتيجة "undefined"
- Fulfilled ( تم تنفيذه ) وتكون النتيجة عبارة عن قيمة "value "
- Rejected ( تم رفضه ) تكون النتيجة عبارة عن "error "
| myPromise.state | myPromise.result |
| "pending" | undefined |
| "fulfilled" | a result value |
| "rejected" | error object |
اولا نقوم بتحديد الدالة التي سوف نستخدم خلالها ال Promise ونقوم بتحديد دالتين يتم تنفيذ احداهم تبعا لنتيجة تنفيذ الدالة التي نستخدم معها ال promise
myPromise.then(
function(value) { /* code if successful */ },
function(error) { /* code if some error */ }
);
ولتوضيح مفهوم ال Promise بشكل افضل سوف نقوم باستخدام ال callback ونقارنها بال Promise لنعرف الفرق وسوف نستخدم حالتين في التنفيذ وهما
- انتظار فترة زمنية معينة
- انتظار ملف معين
Example Using Callback
setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {
document.getElementById("demo").innerHTML = value;
}
Example Using Promise
let myPromise = new Promise(function(myResolve, myReject) {
setTimeout(function() { myResolve("I love You !!"); }, 3000);
});
myPromise.then(function(value) {
document.getElementById("demo").innerHTML = value;
});
Example using Callback
function getFile(myCallback) {
let req = new XMLHttpRequest();
req.open('GET', "mycar.html");
req.onload = function() {
if (req.status == 200) {
myCallback(req.responseText);
} else {
myCallback("Error: " + req.status);
}
}
req.send();
}
getFile(myDisplayer);
Example
let myPromise = new Promise(function(myResolve, myReject) {
let req = new XMLHttpRequest();
req.open('GET', "mycar.htm");
req.onload = function() {
if (req.status == 200) {
myResolve(req.response);
} else {
myReject("File not Found");
}
};
req.send();
});
myPromise.then(
function(value) {myDisplayer(value);},
function(error) {myDisplayer(error);}
);
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.