JS Async/Await
في هذا الدرس سوف نتعرف علي ال async وال await وهما يعملان بنفس الطريقة التي يعمل بها ال Promise والتي سبق وتعرفنا عليها في الدرس السابق ولكن بطريقة اسهل
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
الشروحات chevron_left JS Async/Await chevron_left JavaScript
JS Async/Await
</> JS Async/Await
استخدام ال async/await يسهل عملية ال Promise التي تعلمناها في الدرس السابق
- async : تستخدم في أنشاء دالة تقوم بأرجاع Promise
- await : تستخدم في أنشاء دالة تنتظر تنفيذ ال Promise
</> Async Syntax
عند كتابة كلمة async قبل اسم الدالة كما في المثال التالي تجعل الدالة تقوم بأرجاع Promise بشكل تلقائي
async function myFunction() {
return "Hello";
}
المثال التالي هو نفسه المثال السابق لأن ال async تقوم بأرجاع Promise بشكل تلقائي
async function myFunction() {
return Promise.resolve("Hello");
}
والشكل التالي يوضح طريقة استخدام ال Promise وسبق وقمنا بشرحها في الدروس السابقة
myFunction().then(
function(value) { /* code if successful */ },
function(error) { /* code if some error */ }
);
Example
async function myFunction() {
return "Hello";
}
myFunction().then(
function(value) {myDisplayer(value);},
function(error) {myDisplayer(error);}
);
Example
async function myFunction() {
return "Hello";
}
myFunction().then(
function(value) {myDisplayer(value);}
);
</> Await Syntax
كتابة كلمة "await" قبل الدالة يجعلها تنتظر Promise من ال async وبناءا علي النتيجة يتم تنفيذ الدالة التي استخدام معها await
let value = await promise;
Example
async function myDisplay() {
let myPromise = new Promise(function(resolve, reject) {
resolve("I love You !!");
});
document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();
- كل من ال arguments التالية (resolve , reject ) تم انشائهم من قبل لغة ال java script أي اننا لسنا بحاجة الي اعادة انشائها مره اخري بداخل البرنامج الخاص بنا ويمكننا استدعائها مباشرة
- في كثير من الأحيان لن نحتاج الي استخدام دالة reject
Example without reject
async function myDisplay() {
let myPromise = new Promise(function(resolve) {
resolve("I love You !!");
});
document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();
Waiting for a Timeout
async function myDisplay() {
let myPromise = new Promise(function(resolve) {
setTimeout(function() {resolve("I love You !!");}, 3000);
});
document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
