async و await
أهمية async و await
نستخدم الكلمتين
إذاً تنفيذ البرومس سيصبح أكثر سهولة في حال قمت باستخدام هاتين الكلمتين.
طريقة استخدام async و await
الكلمة
الكلمة
قبل استخدام async و await
في المثال التالي قمنا ببناء دالة إسمها
ملاحظة: جعلناه يتأخر في الرد مدة ثانية واحدة عمداً كمحاكات للمدة التي قد يسغرقها السيرفر في الرد.
مثال
<!DOCTYPE html>
<html>
<body>
<h1>Javascript Promise</h1>
<p>Click on the button and wait for 1 second to execute the promise.</p>
<button onclick="executePromise()">Execute the promise</button>
<p id="demo"></p>
<script>
// هنا قمنا بتعريف دالة تقوم بإرجاع برومس عندما يتم استدعاءها
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().then((value) => {
// demo يساوي id النتيجة التي يرجعها سيتم عرضها في العنصر الذي يملك
document.querySelector('#demo').innerHTML = 'Result = ' + value;
});
}
</script>
</body>
</html>لم نضف الدالة
بعد استخدام async و await
الآن سنقوم بإعادة المثال السابق مع التعديل عليه لاستخدام
مثال
<!DOCTYPE html>
<html>
<body>
<h1>Javascript Async Await Keywords</h1>
<p>Click on the button and wait for 1 second to execute the promise.</p>
<button onclick="executePromise()">Execute the promise</button>
<p id="demo"></p>
<script>
// هنا قمنا بتعريف دالة تقوم بإرجاع برومس عندما يتم استدعاءها
async function fetchData() {
return new Promise((resolve) => {
// هنا أنشأنا مؤقت لجعل تنفيذ أوامر البرومس يتم بعد مرور ثانية
setTimeout(() => {
// هنا قمنا بتعريف متغير قيمته عبارة عن عدد عشوائي بين 1 و 10
const value = Math.floor(Math.random() * 10) + 1;
// value هنا قمنا بإرجاع قيمة
resolve(value);
}, 1000);
});
}
// سيتم تنفيذها عند النقر على الزر الموجود في الصفحة executePromise() الدالة
async function executePromise() {
// data لتنفيذ البرومس و تخزين نتيجته أياً كانت في المتغير fetchData() هنا قمنا باستدعاء الدالة
let data = await fetchData();
// demo يساوي id في العنصر الذي يملك data هنا قمنا بعرض النتيجة المخزنة في المتغير
document.querySelector('#demo').innerHTML = 'Result = ' + data;
}
</script>
</body>
</html>عندما تكون الدالة ستنتظر أن يتم تنفيذ برومس فيها، فإنه يجب جعل الدالة نفسها متزامنة من خلال إضافة الكلمة
معالجة أخطاء البرومس
في حال كنت تتعامل مع البرومس بأسلوب
مثال
<!DOCTYPE html>
<html>
<body>
<h1>Javascript Async Await Keywords</h1>
<p>Click on the button and wait for 1 second to execute the promise.</p>
<button onclick="executePromise()">Execute the promise</button>
<p id="demo"></p>
<script>
// هنا قمنا بتعريف دالة تقوم بإرجاع برومس عندما يتم استدعاءها
async function fetchData() {
return new Promise((resolve) => {
// هنا أنشأنا مؤقت لجعل تنفيذ أوامر البرومس يتم بعد مرور ثانية
setTimeout(() => {
// هنا قمنا بتعريف متغير قيمته عبارة عن عدد عشوائي بين 1 و 10
const value = Math.floor(Math.random() * 10) + 1;
// value هنا قمنا بإرجاع قيمة
resolve(value);
}, 1000);
});
}
// سيتم تنفيذها عند النقر على الزر الموجود في الصفحة executePromise() الدالة
async function executePromise() {
try {
// data لتنفيذ البرومس و تخزين نتيجته أياً كانت في المتغير fetchData() هنا قمنا باستدعاء الدالة
let data = await fetchData();
// demo يساوي id في المتغير الذي يملك data هنا قمنا بعرض النتيجة المخزنة في المتغير
document.querySelector('#demo').innerHTML = 'Result = ' + data;
}
catch(error) {
// demo يساوي id هنا قمنا بعرض الخطأ الذي قد يحدث في العنصر الذي يملك
document.querySelector('#demo').innerHTML = error;
}
}
</script>
</body>
</html>