Async/await في جافاسكريبت

في هذه المقالة، سنشرح async/await في جافاسكريبت۔

YouTube Video

Async/await في جافاسكريبت

async (وawait) في جافاسكريبت هما ميزتان مصممتان لجعل كتابة العمليات غير المتزامنة أكثر سهولة وفهمًا.۔ من خلال استخدام هذا، يمكنك تقليل تعقيد الدوال الارتجاعية التقليدية وسلاسل الـPromise، وكتابة التعليمات البرمجية غير المتزامنة بطريقة تبدو وكأنها تعليمات متزامنة.۔

وظيفة async

async تُستخدم لتعريف وظيفة كوظيفة غير متزامنة.۔ وظيفة async تعيد دائمًا كائنًا من نوع Promise.۔ داخل وظيفة تم تعريفها بـasync، يمكنك استخدام await لانتظار النتيجة من Promise.۔

القواعد الأساسية لكتابة وظيفة async

1async function myAsyncFunction() {
2    // Write asynchronous processing here
3    return 'Result';  // Return a Promise
4}

في هذه الحالة، استدعاء myAsyncFunction() يعيد تلقائيًا كائنًا من نوع Promise.۔ عندما يتم تحقيق Promise، تصبح نتيجته هي القيمة التي تُعاد بواسطة return.۔

مثال: وظيفة async الأساسية

1async function greet() {
2    return 'Hello, World!';
3}
4
5greet().then((message) => {
6    console.log(message);  // Displays "Hello, World!"
7});

await

await تُستخدم لانتظار تحقيق Promise.۔ باستخدام await، يمكنك توقيف التنفيذ حتى يتم تحقيق Promise والحصول على نتيجته.۔ await يمكن استخدامها فقط داخل وظيفة async.۔

مثال: كيفية استخدام await

 1async function fetchData() {
 2    // Wait for the result of the Promise
 3    const data = await fetch('https://codesparklab.com/json/example.json');
 4    // Wait for the asynchronous operation to complete
 5    const jsonData = await data.json();
 6    // Retrieve and display the data
 7    console.log(jsonData);
 8}
 9
10fetchData();

في المثال أعلاه، ينتظر الـPromise المعاد بواسطة وظيفة fetch باستخدام await، ثم يقوم بتنفيذ عمليات غير متزامنة إضافية باستخدام النتيجة.۔

التعامل مع الأخطاء باستخدام async/await

إذا حدث خطأ داخل وظيفة async، يتم التعامل مع هذا الخطأ كـreject للـPromise.۔ يمكنك استخدام عبارات try...catch للتعامل مع الأخطاء.۔

مثال: التعامل مع الأخطاء

 1async function fetchData() {
 2    try {
 3        // Invalid URL
 4        const data = await fetch('https://api.invalid-url.com/data');
 5        const jsonData = await data.json();
 6        console.log(jsonData);
 7    } catch (error) {
 8        // Catch the error
 9        console.error('Failed to fetch data:', error);
10    }
11}
12
13fetchData();

باستخدام كتلة try...catch، يمكنك التقاط الأخطاء التي تحدث أثناء العمليات غير المتزامنة، مما يمنع تعطل البرنامج عند حدوث الأخطاء.۔

فوائد async/await

بالمقارنة مع سلاسل الـPromise التقليدية، يوفر استخدام async/await المزايا التالية:۔

• قابلية قراءة أفضل
  • يمكن كتابة المعالجة غير المتزامنة كما لو أنها تعليمات متزامنة، مما يجنبك تعقيد سلاسل الـPromise المتداخلة بشكل عميق والدوال الارتجاعية.۔
• تصحيح أسهل للأخطاء
  • نظرًا لأنها تشبه التعليمات المتزامنة، يصبح تصحيح الأخطاء والتعامل معها أسهل.۔
• قابلية صيانة أفضل
  • يمكن كتابة العمليات غير المتزامنة بشكل أبسط، مما يسهل تغيير أو تعديل الكود ويحسن من قابليته للصيانة على المدى الطويل.۔

مثال: سلسلة Promise مقابل async/await

دعونا نقارن بين التعليمات البرمجية التي تستخدم سلاسل الـPromise والتعليمات التي تستخدم async/await.۔

 1// Code using Promise chains
 2function fetchDataPromise() {
 3    fetch('https://codesparklab.com/json/example.json')
 4        .then((response) => response.json())
 5        .then((data) => {
 6            console.log(data);
 7        })
 8    .catch((error) => {
 9        console.error('Failed to fetch data:', error);
10    });
11}
12
13// Code using async/await
14async function fetchDataAsync() {
15    try {
16        const response = await fetch('https://codesparklab.com/json/example.json');
17        const data = await response.json();
18        console.log(data);
19    } catch (error) {
20        console.error('Failed to fetch data:', error);
21    }
22}

كما ترى، يسمح لك استخدام async/await بكتابة العمليات غير المتزامنة بشكل خطي، مما يؤدي إلى كود أكثر قابلية للقراءة.۔

تنفيذ عمليات غير متزامنة متعددة في الوقت نفسه

عند دمج Promise.all() أو Promise.race() مع await، يمكنك تنفيذ عمليات غير متزامنة متعددة في آنٍ واحد ومعالجة نتائجها بشكل جماعي۔

مثال: تنفيذ عمليات غير متزامنة متعددة في وقت واحد

 1async function fetchMultipleData() {
 2    try {
 3        const [data1, data2] = await Promise.all([
 4            fetch('https://codesparklab.com/json/example1.json'),
 5            fetch('https://codesparklab.com/json/example2.json')
 6        ]);
 7        const jsonData1 = await data1.json();
 8        const jsonData2 = await data2.json();
 9        console.log(jsonData1, jsonData2);
10    } catch (error) {
11        console.error('Failed to fetch data:', error);
12    }
13}
14
15fetchMultipleData();

Promise.all() يعالج العديد من الوعود في وقت واحد ويعيد نتائجها في شكل مصفوفة۔ ينتظر الانتهاء من جميع الوعود، وإذا فشل أي منها، يُعتبر ذلك فشلًا كليًا۔

الملخص

• دالة async: تُعيد دائمًا وعدًا (Promise) وتُستخدم لكتابة المعالجة غير المتزامنة۔
• await: تُستخدم لانتظار حل الوعد (Promise) والحصول على نتيجته۔
• معالجة الأخطاء: استخدم try...catch للتعامل مع الأخطاء التي تحدث أثناء المعالجة غير المتزامنة۔
• العمليات غير المتزامنة المتعددة: يمكنك تنفيذ عمليات غير متزامنة متعددة في وقت واحد باستخدام Promise.all()۔

async/await هي أدوات قوية للتعامل مع المعالجة غير المتزامنة، لذا تأكد من استخدامها لتبسيط المنطق المعقد للعمليات غير المتزامنة۔

يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔

YouTube Video