JavaScript

JS Async/Await

في هذا الدرس سوف نتعرف علي ال async وال await وهما يعملان بنفس الطريقة التي يعمل بها ال Promise والتي سبق وتعرفنا عليها في الدرس السابق  ولكن بطريقة اسهل 

التاريخ

13 نوفمبر 2021

الدروس

146

المستوى

العامة

اللغة

انجليزي

المشاهدات

1235

المواضيع

24
الشروحات 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();
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.