جافاسكربتالبرومس
- مفهوم البرومس
- خطوات إنشاء برومس و تنفيذه
- مثال عملي حول البرومس
- معالجة جميع أخطاء البرومس
- المزيد حول بناء البرومس
مفهوم البرومس
الوعد أو البرومس ( Promise ) هو كائن و فيه دالة أوامرها تتنفذ بشكل متزامن، حيث أنه يكون متوقع أن تكون بحاجة لبعض الوقت حتى تتنفذ و ترجع النتيجة في النهاية. و في كلا الحالتين فإنك قادر على ترقب و معالجة ما سترجعه لك.
مفسّر الكود لا يقف عند تنفيذ البرومس، بل يكمل تننفيذ باقي الأوامر الموجودة بعده و يكون بذات الوقت يترقب النتيجة التي سيرجعها حتى يعالجها.
في هذا الدرس ستتعلم طريقة إنشاء برومس جديد، طريقة تنفيذه، و طريقة معالجة النتائج التي يرجعها.
خطوات إنشاء برومس و تنفيذه
بشكل عام، كائن البرومس يتم بناؤه بواسطة الكونستركتور new Promise() و الحصول على نتيجته يتم من خلال استدعاء الدالة then() منه.
أسلوب إنشاء البرومس أمر قد تجده معقد جداً لأنه لا يشبه الطرق السابقة التي اعتدت على اتباعها في كتابة الكود، و لهذا سنشرحه على خطوات و من ثم نضع لك الشكل العام لإنشائه.
الآن سنقوم بتعريف دالة إسمها fetchData() مهمتها إنشاء و تنفيذ البرومس عندما يتم استدعاءها.
الخطوة الأولى
function fetchData() {
return // هنا يجب أن نجعلها ترجع كائن يمثل البرومس
}
function fetchData() {
return // هنا يجب أن نجعلها ترجع كائن يمثل البرومس
}
الآن سنجعل الدالة fetchData() ترجع برومس جديد بواسطة الكونستركتور new Promise().
الخطوة الثانية
function fetchData() {
return new Promise((resolve, reject) => {
// هنا يجب وضع كود البرومس
});
}
function fetchData() {
return new Promise((resolve, reject) => {
// هنا يجب وضع كود البرومس
});
}
الآن سنحدد كيف سيتم إرجاع قيمة من البرومس مع تحديد ما إن كانت قيمة سليمة أم أنها قيمة تشير للخطأ الذي وقع عند تنفيذ البرومس.
في حال تم تمرير القيمة إلى الدالة resolve() فإنه سيتم إرجاعها من البرومس كقيمة سليمة، و في حال تم تمرير القيمة إلى الدالة reject() فإنه سيتم إرجاعها من البرومس كخطأ.
الخطوة الثالثة
function fetchData() {
return new Promise((resolve, reject) => {
// كود البرومس يبدأ من هنا
// القيمة التي نريد إرجاعها من البرومس في حال لم يحدث خطأ نمررها للدالة التالية
resolve(value);
// القيمة التي نريد إرجاعها من البرومس في حال حدوث خطأ نمررها للدالة التالية
reject(error);
});
}
function fetchData() {
return new Promise((resolve, reject) => {
// كود البرومس يبدأ من هنا
// القيمة التي نريد إرجاعها من البرومس في حال لم يحدث خطأ نمررها للدالة التالية
resolve(value);
// القيمة التي نريد إرجاعها من البرومس في حال حدوث خطأ نمررها للدالة التالية
reject(error);
});
}
في النهاية لتنفيذ أوامر البرومس علينا استدعاء الدالة fetchData()، و للحصول على نتيجتها علينا استدعاء الدالة then() منها.
الخطوة الأخيرة
function fetchData() {
return new Promise((resolve, reject) => {
// كود البرومس يبدأ من هنا
// القيمة التي نريد إرجاعها من البرومس في حال لم يحدث خطأ نمررها للدالة التالية
resolve(value);
// القيمة التي نريد إرجاعها من البرومس في حال حدوث خطأ نمررها للدالة التالية
reject(error);
});
}
// هنا قمنا باستدعاء الدالة التي ترجع البرومس مع مراقبة نتائجها
fetchData().then(
(value) => { /* هنا نعالج النتيجة التي قد يرجعها البرومس */ },
(error) => { /* هنا نعالج الخطأ الذي قد يرجعه البرومس */ }
);
function fetchData() {
return new Promise((resolve, reject) => {
// كود البرومس يبدأ من هنا
// القيمة التي نريد إرجاعها من البرومس في حال لم يحدث خطأ نمررها للدالة التالية
resolve(value);
// القيمة التي نريد إرجاعها من البرومس في حال حدوث خطأ نمررها للدالة التالية
reject(error);
});
}
// هنا قمنا باستدعاء الدالة التي ترجع البرومس مع مراقبة نتائجها
fetchData().then(
(value) => { /* هنا نعالج النتيجة التي قد يرجعها البرومس */ },
(error) => { /* هنا نعالج الخطأ الذي قد يرجعه البرومس */ }
);
أسماء الدوال resolve و reject و أسماء المتغيرات value و error استخدمناها لأن معناها يشير لما تقوم به و لكن يمكنك تبديلها بأسماء أخرى إن أردت ذلك.
مثال عملي حول البرومس
في المثال التالي قمنا بإنشاء برومس يعطينا رقم عشوائي بين 1 و 10 بعد مرور ثانية واحدة.
الرقم الذي يعطينا إياها سنعتبره مقبولاً إن كان أكبر أو يساوي 5، و سنعتبره مرفوضاً إن لم يكن كذلك.
نتيجة تنفيذ البرومس سنعرضها باللون الأخضر إن كانت مقبولة، و باللون الأحمر إن لم تكن كذلك.
مثال
<button onclick="executePromise()">Execute the promise</button>
<script>
// هنا قمنا بتعريف دالة تقوم بإرجاع برومس عندما يتم استدعاءها
function fetchData() {
return new Promise((resolve, reject) => {
// هنا أنشأنا مؤقت لجعل تنفيذ أوامر البرومس يتم بعد مرور ثانية واحدة
setTimeout( () => {
// هنا قمنا بتعريف متغير قيمته عبارة عن عدد عشوائي بين 1 و 10
const value = Math.floor(Math.random() * 10) + 1;
// أكبر أو تساوي 5 فهي قيمة مقبولة value هنا إعتبرنا أنه إذا كانت قيمة المتغير
if (value >= 5) {
resolve(value);
}
// أكبر أو تساوي 5 فهي قيمة خاطئة value هنا إعتبرنا أنه إذا لم تكن قيمة المتغير
else {
reject(value);
}
}, 1000);
});
}
// سيتم تنفيذها عند النقر على الزر الموجود في الصفحة executePromise() الدالة
function executePromise() {
// لتنفيذ البرومس و الحصول على نتيجته then() و من ثم الدالة fetchData() هنا قمنا باستدعاء الدالة
fetchData().then(
// demo يساوي id إذا أرجع لنا قيمة سليمة فسيتم عرضها في العنصر الذي يملك
(value) => {
document.querySelector('#demo').innerHTML = 'Value returned = ' + value;
document.querySelector('#demo').style.color = 'green';
},
// demo يساوي id إذا أرجع لنا قيمة تشير لخطأ فسيتم عرضها في العنصر الذي يملك
(error) => {
document.querySelector('#demo').innerHTML = 'Error returned = ' + error;
document.querySelector('#demo').style.color = 'red';
}
);
}
</script>
<button onclick="executePromise()">Execute the promise</button>
<script>
// هنا قمنا بتعريف دالة تقوم بإرجاع برومس عندما يتم استدعاءها
function fetchData() {
return new Promise((resolve, reject) => {
// هنا أنشأنا مؤقت لجعل تنفيذ أوامر البرومس يتم بعد مرور ثانية واحدة
setTimeout( () => {
// هنا قمنا بتعريف متغير قيمته عبارة عن عدد عشوائي بين 1 و 10
const value = Math.floor(Math.random() * 10) + 1;
// أكبر أو تساوي 5 فهي قيمة مقبولة value هنا إعتبرنا أنه إذا كانت قيمة المتغير
if (value >= 5) {
resolve(value);
}
// أكبر أو تساوي 5 فهي قيمة خاطئة value هنا إعتبرنا أنه إذا لم تكن قيمة المتغير
else {
reject(value);
}
}, 1000);
});
}
// سيتم تنفيذها عند النقر على الزر الموجود في الصفحة executePromise() الدالة
function executePromise() {
// لتنفيذ البرومس و الحصول على نتيجته then() و من ثم الدالة fetchData() هنا قمنا باستدعاء الدالة
fetchData().then(
// demo يساوي id إذا أرجع لنا قيمة سليمة فسيتم عرضها في العنصر الذي يملك
(value) => {
document.querySelector('#demo').innerHTML = 'Value returned = ' + value;
document.querySelector('#demo').style.color = 'green';
},
// demo يساوي id إذا أرجع لنا قيمة تشير لخطأ فسيتم عرضها في العنصر الذي يملك
(error) => {
document.querySelector('#demo').innerHTML = 'Error returned = ' + error;
document.querySelector('#demo').style.color = 'red';
}
);
}
</script>
معالجة جميع أخطاء البرومس
في حال أردت معالجة جميع الأخطاء التي قد تحدث عند تنفيذ البرومس و ليس فقط التي تحددها أنت بواسطة الدالة reject() فيمكنك إستدعاء الدالة catch() مباشرةً بعد استدعاء الدالة then().
مثال
// سيتم تنفيذها عند النقر على الزر الموجود في الصفحة executePromise() الدالة
function executePromise() {
// لتنفيذ البرومس fetchData() هنا قمنا باستدعاء الدالة
fetchData()
// للحصول على نتيجة تنفيذ البرومس then() هنا قمنا باستدعاء الدالة
.then((value) => {
// demo يساوي id إذا أرجع لنا قيمة سليمة فسيتم عرضها في العنصر الذي يملك
document.querySelector('#demo').innerHTML = 'Value returned = ' + value;
document.querySelector('#demo').style.color = 'green';
})
// للحصول على أي خطأ قد يحدث عند تنفيذ البرومس catch() هنا قمنا باستدعاء الدالة
.catch((error) => {
// demo يساوي id إذا أرجع لنا قيمة تشير لخطأ فسيتم عرضها في العنصر الذي يملك
document.querySelector('#demo').innerHTML = 'Error returned = ' + error;
document.querySelector('#demo').style.color = 'red';
});
}
// سيتم تنفيذها عند النقر على الزر الموجود في الصفحة executePromise() الدالة
function executePromise() {
// لتنفيذ البرومس fetchData() هنا قمنا باستدعاء الدالة
fetchData()
// للحصول على نتيجة تنفيذ البرومس then() هنا قمنا باستدعاء الدالة
.then((value) => {
// demo يساوي id إذا أرجع لنا قيمة سليمة فسيتم عرضها في العنصر الذي يملك
document.querySelector('#demo').innerHTML = 'Value returned = ' + value;
document.querySelector('#demo').style.color = 'green';
})
// للحصول على أي خطأ قد يحدث عند تنفيذ البرومس catch() هنا قمنا باستدعاء الدالة
.catch((error) => {
// demo يساوي id إذا أرجع لنا قيمة تشير لخطأ فسيتم عرضها في العنصر الذي يملك
document.querySelector('#demo').innerHTML = 'Error returned = ' + error;
document.querySelector('#demo').style.color = 'red';
});
}
المزيد حول بناء البرومس
في حال كان البرومس سيرجع فقط قيم مقبولة فإنه لا داعي أن يتم وضع الدالة reject() فيه ليصبح الشكل العام له كما يلي.
مثال
// هنا قمنا بتعريف دالة تقوم بإرجاع برومس عندما يتم استدعاءها
function fetchData() {
return new Promise((resolve) => {
// هنا نضع الكود المتوقع أن يستغرق تنفيذه بعض الوقت
// القيمة التي نريد إرجاعها من البرومس في حال لم يحدث خطأ نمررها للدالة التالية
resolve(value);
});
}
// هنا قمنا باستدعاء الدالة التي ترجع برومس مع مراقبة نتائجها
fetchData().then(
(value) => { /* هنا نعالج النتيجة التي قد يرجعها البرومس */ }
);
// هنا قمنا بتعريف دالة تقوم بإرجاع برومس عندما يتم استدعاءها
function fetchData() {
return new Promise((resolve) => {
// هنا نضع الكود المتوقع أن يستغرق تنفيذه بعض الوقت
// القيمة التي نريد إرجاعها من البرومس في حال لم يحدث خطأ نمررها للدالة التالية
resolve(value);
});
}
// هنا قمنا باستدعاء الدالة التي ترجع برومس مع مراقبة نتائجها
fetchData().then(
(value) => { /* هنا نعالج النتيجة التي قد يرجعها البرومس */ }
);
عند تنفيذ البرومس، يمكنك استخدام الدالة catch() تحسباً لعالجة أي خطأ قد يحدث.
في المثال التالي قمنا ببناء برومس يرجع قيمة عشوائية بين 1 و 10 عندما يتم تنفيذه.
مثال
// هنا قمنا بتعريف دالة تقوم بإرجاع برومس عندما يتم استدعاءها
function fetchData() {
return new Promise((resolve) => {
// هنا أنشأنا مؤقت لجعل تنفيذ أوامر البرومس يتم بعد مرور ثلاث ثواني
setTimeout( () => {
// هنا قمنا بتعريف متغير قيمته عبارة عن عدد عشوائي بين 1 و 10
const value = Math.floor(Math.random() * 10) + 1;
// value هنا قمنا بإرجاع قيمة
resolve(value);
}, 1000);
});
}
// سيتم تنفيذها عند النقر على الزر الموجود في الصفحة executePromise() الدالة
function executePromise() {
// لتنفيذ البرومس و الحصول على نتيجته then() و من ثم الدالة fetchData() هنا قمنا باستدعاء الدالة
fetchData()
// demo يساوي id إذا أرجع لنا قيمة سليمة فسيتم عرضها في العنصر الذي يملك
.then((value) => {
document.querySelector('#demo').innerHTML = 'Value returned = ' + value;
document.querySelector('#demo').style.color = 'green';
})
// للحصول على أي خطأ قد يحدث عند تنفيذ البرومس catch() هنا قمنا باستدعاء الدالة
.catch((error) => {
// demo يساوي id إذا أرجع لنا قيمة تشير لخطأ فسيتم عرضها في العنصر الذي يملك
document.querySelector('#demo').innerHTML = 'Error returned = ' + error;
document.querySelector('#demo').style.color = 'red';
});
}
// هنا قمنا بتعريف دالة تقوم بإرجاع برومس عندما يتم استدعاءها
function fetchData() {
return new Promise((resolve) => {
// هنا أنشأنا مؤقت لجعل تنفيذ أوامر البرومس يتم بعد مرور ثلاث ثواني
setTimeout( () => {
// هنا قمنا بتعريف متغير قيمته عبارة عن عدد عشوائي بين 1 و 10
const value = Math.floor(Math.random() * 10) + 1;
// value هنا قمنا بإرجاع قيمة
resolve(value);
}, 1000);
});
}
// سيتم تنفيذها عند النقر على الزر الموجود في الصفحة executePromise() الدالة
function executePromise() {
// لتنفيذ البرومس و الحصول على نتيجته then() و من ثم الدالة fetchData() هنا قمنا باستدعاء الدالة
fetchData()
// demo يساوي id إذا أرجع لنا قيمة سليمة فسيتم عرضها في العنصر الذي يملك
.then((value) => {
document.querySelector('#demo').innerHTML = 'Value returned = ' + value;
document.querySelector('#demo').style.color = 'green';
})
// للحصول على أي خطأ قد يحدث عند تنفيذ البرومس catch() هنا قمنا باستدعاء الدالة
.catch((error) => {
// demo يساوي id إذا أرجع لنا قيمة تشير لخطأ فسيتم عرضها في العنصر الذي يملك
document.querySelector('#demo').innerHTML = 'Error returned = ' + error;
document.querySelector('#demo').style.color = 'red';
});
}
