كيفية استخدام Async/Await في JavaScript – موضح بأمثلة التعليمات البرمجية

مرحبا بمتابعي وزوار مدونة الشهادة مع مقال جديد بعنوان كيفية استخدام Async/Await في JavaScript – موضح بأمثلة التعليمات البرمجية

سأوضح لك في هذه المقالة كيفية استخدام الصيغة الخاصة “async/await” عند التعامل مع وعود JavaScript.

ستحتاج إلى فهم وعود JavaScript جيدًا قبل تعلم بناء الجملة غير المتزامن/الانتظار.

كيف يعمل المزامنة/الانتظار

إن بناء الجملة غير المتزامن/الانتظار هو بناء جملة خاص تم إنشاؤه لمساعدتك في العمل مع الكائنات الواعدة. فهو يجعل التعليمات البرمجية الخاصة بك أكثر نظافة ووضوحًا.

عند التعامل مع دالة Promise، تحتاج إلى ربط الاستدعاء بالدالة أو المتغير الذي يُرجع طرق Promiseالاستخدام then/catch.

عندما يكون لديك الكثير من الوعود، ستحتاج أيضًا إلى الكثير من thenسلاسل الأساليب. على سبيل المثال، إليك كيفية استرداد البيانات باستخدام الوظيفة fetch():

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(json => console.log(json))
  .catch(error => console.log(error));

في الكود أعلاه، fetch()تُرجع الدالة ملفًا Promise، والذي نتعامل معه باستخدام then()الطريقة. داخل الطريقة الأولى then()، نقبل responseالطلب ونحوله إلى كائن باستخدام الطريقة json().

في الطريقة الثانية then()، نتلقى jsonالبيانات التي تم إرجاعها من استدعاء الطريقة json()، ثم نقوم بتسجيل تلك البيانات إلى وحدة التحكم.

نقوم أيضًا بإضافة catch()طريقة لمعالجة أي خطأ قد يحدث عند تشغيل الطلب.

ليس من الصعب حقًا فهم الكود، ولكن يمكننا جعله أجمل عن طريق إزالة السلاسل .then()، .catch()مما يؤدي أيضًا إلى إزالة وظائف رد الاتصال.

الكلمة الرئيسية المنتظرة

الكلمة awaitالأساسية تجعل JavaScript تنتظر حتى Promiseيتم حل الكائن أو رفضه. بدلاً من الاضطرار إلى استخدام نمط رد الاتصال داخل then()الطريقة، يمكنك تعيين الوعد المُنجز إلى متغير مثل هذا:

const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
const json = await response.json();
console.log(json)

يتم وضع الكلمة awaitالأساسية قبل استدعاء دالة أو متغير يُرجع وعدًا. فهو يجعل JavaScript تنتظر حتى يستقر كائن الوعد قبل تشغيل الكود في السطر التالي.

الآن، إذا قمت بتشغيل الكود أعلاه، فقد تحصل على خطأ مثل هذا:

SyntaxError: await is only valid in async functions and the top level bodies of modules

يحدث هذا الخطأ لأنه awaitيجب استخدام الكلمة الأساسية داخل دالة غير متزامنة أو وحدة نمطية.

الكلمة الأساسية غير المتزامنة

لإنشاء وظيفة غير متزامنة، تحتاج إلى إضافة الكلمة asyncالأساسية قبل اسم وظيفتك. ألق نظرة على السطر 1 في المثال أدناه:

async function runProcess() {
  const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
  const json = await response.json();
  console.log(json)
}

runProcess();

هنا، قمنا بإنشاء وظيفة غير متزامنة تسمى runProcess()ووضعنا الكود الذي يستخدم awaitالكلمة الأساسية بداخلها. يمكننا بعد ذلك تشغيل الدالة غير المتزامنة عن طريق استدعائها، تمامًا مثل الدالة العادية.

كيفية التعامل مع الأخطاء في Async/Await

للتعامل مع الخطأ الذي قد يحدث من بناء الجملة غير المتزامن/الانتظار، يمكنك استخدام كتلة المحاولة/التقاط للقبض على أي رفض من وعدك.

انظر المثال أدناه:

async function runProcess() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
    const json = await response.json();
    console.log(json);
  } catch (error) {
    console.log(error);
  }
}

runProcess();

runProcess()ستتعامل كتلة المحاولة/الالتقاط الموجودة داخل الوظيفة مع الرفض الذي يأتي من كائنات الوعد.

الآن لدينا نسخة كاملة غير متزامنة/منتظرة من كود الوعد القياسي الذي أنشأناه سابقًا. وهنا مقارنة بين الاثنين:

في الإصدار غير المتزامن/الانتظار، يتم تعيين نتيجة الوعد مباشرةً إلى متغير. في إصدار الوعد القياسي، يتم تمرير نتيجة الوعد كوسيطة للطريقة .then().

يفضل معظم المطورين الإصدار غير المتزامن/الانتظار لأنه يبدو أكثر وضوحًا.

كيفية استخدام Async/Await في وظائف IIFE والسهم

تعبير الوظيفة الذي يتم استدعاؤه فورًا (IIFE) هو أسلوب يستخدم لتنفيذ وظيفة فورًا بمجرد تحديدها.

على عكس الوظائف والمتغيرات العادية، ستتم إزالة IIFEs من عملية التشغيل بمجرد تنفيذها.

وبصرف النظر عن الوظيفة القياسية، يمكنك أيضًا إنشاء IIFE غير متزامن. يكون هذا مفيدًا عندما تحتاج إلى تشغيل الوظيفة غير المتزامنة مرة واحدة فقط:

(async function () {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
    const json = await response.json();
    console.log(json);
  } catch (error) {
    console.log(error);
  }
})();

يمكنك أيضًا استخدام صيغة السهم عند إنشاء دالة غير متزامنة كما يلي:

const runProcess = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
    const json = await response.json();
    console.log(json);
  } catch (error) {
    console.log(error);
  }
};

runProcess();

لا تتردد في استخدام بناء الجملة الذي تريده في التعليمات البرمجية الخاصة بك.

لماذا استخدام بناء الجملة غير المتزامن/الانتظار؟

يمكّنك بناء جملة async/await من التعامل مع الوعود دون استخدام .then()وتسلسل .catch()الأساليب، مما يلغي أيضًا الحاجة إلى عمليات الاسترجاعات المتداخلة.

تكون هذه الفائدة كبيرة عندما يكون لديك عملية معقدة بعد تسوية الوعد.

بالعودة إلى مثالنا أعلاه، لنفترض أن لديك عبارة شرطية داخل .then()الطريقة كما يلي:

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(json => {
    if (json.userId == 1) {
      json.completed == false;
    } else {
      json.completed == true;
    }
  })
  .catch(error => console.log(error));

هنا، يمكنك أن ترى أن وظيفة رد الاتصال التي تقبل البيانات jsonتحتوي على كتلة if/else بداخلها.

من الصعب فهم هذا الكود وتعديله عند مقارنته بالإصدار غير المتزامن/الانتظار كما يلي:

(async function () {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
    const json = await response.json();
    if (json.userId == 1) {
      json.completed == false;
    } else {
      json.completed == true;
    }
    console.log(json);
  } catch (error) {
    console.log(error);
  }
})();

باستخدام بناء الجملة غير المتزامن/الانتظار، يمكنك تقليل الحاجة إلى تسلسل الأساليب وعمليات الاسترجاعات المتداخلة. يؤثر هذا على سهولة قراءة التعليمات البرمجية الخاصة بك، خاصة عندما يكون لديك تعليمات برمجية متداخلة مثل if/else وكتلة حلقة for.

خاتمة

لقد تعلمت الآن كيفية عمل صيغة المزامنة/الانتظار. يجعل بناء الجملة العمل مع الوعود أسهل بكثير عن طريق إزالة الحاجة إلى تسلسل .then()الأساليب .catch()، مما يلغي أيضًا الحاجة إلى عمليات الاسترجاعات المتداخلة.

على الرغم من أنه awaitلا يمكن استخدام الكلمة الأساسية إلا داخل asyncدالة، يمكنك استخدام IIFE لاستدعاء الدالة غير المتزامنة مرة واحدة فقط.

نسعى دائما لتقديم كل ماهو ممتع لكم فاتمنى ان نكون عند حسن ظنكم جميعا.

فارجو دعمنا وتشجيعنا على تقديم الافضل بمشاركة الموضوع مع اصدقائكم على مواقع التواصل الاجتماعى فيس بوك تويتر عن طريق ازرار المشاركة اسفل التدوينة.

وترك تعليق داخل صندوق التعليقات تشجيعاُ لنا كل الود والاحترام لكم والى اللقاء فى تدوينة اخرى من تدوينات مدونة الشهادة .

40

SHARES

شاركها على فيسبوك

شاركها على تويتر

تابع صفحتنا على فيسبوك