JS Promises
في هذا الدرس سوف نتعرف علي ال Promise وهو عبارة عن عنصر نستخدمه في تنفيذ كود مع الانتظار الي ان يتم تنفيذ كود اخر
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
الشروحات chevron_left JS Promises chevron_left JavaScript
JS Promises
</> JS Promises
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
</> Promise Object Properties
يمكن ان يكون ال object ا "promise " احدي الحالات التالية
- Pending ( قيد تنفيذ الكود ) وتكون النتيجة "undefined"
- Fulfilled ( تم تنفيذه ) وتكون النتيجة عبارة عن قيمة "value "
- Rejected ( تم رفضه ) تكون النتيجة عبارة عن "error "
| myPromise.state | myPromise.result |
| "pending" | undefined |
| "fulfilled" | a result value |
| "rejected" | error object |
</> How To Use Promise
اولا نقوم بتحديد الدالة التي سوف نستخدم خلالها ال Promise ونقوم بتحديد دالتين يتم تنفيذ احداهم تبعا لنتيجة تنفيذ الدالة التي نستخدم معها ال promise
myPromise.then(
function(value) { /* code if successful */ },
function(error) { /* code if some error */ }
);
تأخذ الدالة ( )Promise.then اثنين من ال arguments وهما عبارة عن callback functions احداهم يتم تنفيذها في حالة تم تنفيذ الدالة الاساسية بنجاح والاخري في حالة خطأ تنفيذها
JavaScript Promise Examples
</> JavaScript Promise Examples
ولتوضيح مفهوم ال Promise بشكل افضل سوف نقوم باستخدام ال callback ونقارنها بال Promise لنعرف الفرق وسوف نستخدم حالتين في التنفيذ وهما
- انتظار فترة زمنية معينة
- انتظار ملف معين
</> Waiting for a Timeout
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;
});
</> Waiting for a file
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);}
);
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
