بناء أول طلب API باستخدام async/await و Fetch API

📚 مراجعة سريعة: هذا التطبيق العملي مبني على مفهوم برمجي أساسي. راجع الدرس النظري من هنا أولاً.

---

نظرة عامة على الكود

سنقوم بتحليل الكود المقدم خطوة بخطوة لفهم كيفية عمله في جلب بيانات المستخدم من واجهة برمجة تطبيقات (API) عامة باستخدام async/await و Fetch API.

async function fetchUserData() {
  try {
    // الاتصال بواجهة برمجة تطبيقات مجانية للتجربة
    const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
    
    // التحقق من نجاح الاتصال
    if (!response.ok) {
      throw new Error('فشل الاتصال بالخادم');
    }
    
    // تحويل الاستجابة إلى كائن جافاسكربت
    const user = await response.json();
    
    console.log(`اسم المستخدم: ${user.name}`);
    console.log(`البريد الإلكتروني: ${user.email}`);
  } catch (error) {
    console.error('حدث خطأ أثناء جلب البيانات:', error);
  }
}

fetchUserData();
    

شرح الكود خطوة بخطوة

1. تعريف الدالة غير المتزامنة (async function fetchUserData())

تبدأ العملية بتعريف دالة fetchUserData كدالة غير متزامنة باستخدام الكلمة المفتاحية async. هذا يسمح لنا باستخدام await داخلها.

async function fetchUserData() {
  // ... الكود ...
}
    

2. معالجة الأخطاء باستخدام try...catch

يتم وضع جميع العمليات التي قد تفشل (مثل طلب الشبكة أو تحليل البيانات) داخل كتلة try. إذا حدث أي خطأ في هذه الكتلة، سيتم التقاطه بواسطة كتلة catch، مما يمنع تعطل البرنامج ويسمح بمعالجته بشكل أنيق.

  try {
    // ... عمليات جلب البيانات ...
  } catch (error) {
    console.error('حدث خطأ أثناء جلب البيانات:', error);
  }
    

3. إجراء طلب الشبكة باستخدام fetch()

هنا نقوم بإجراء طلب HTTP GET إلى واجهة برمجة تطبيقات عامة (JSONPlaceholder) لجلب بيانات المستخدم الأول. الكلمة المفتاحية await توقف تنفيذ الدالة مؤقتًا حتى يتم استلام الاستجابة من الخادم.

    const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
    

https://jsonplaceholder.typicode.com/users/1 هي نقطة نهاية (endpoint) عامة توفر بيانات مستخدم وهمي للاختبار.

4. التحقق من نجاح الاستجابة (response.ok)

بعد استلام الاستجابة، من المهم التحقق مما إذا كان الطلب ناجحًا على مستوى HTTP (أي أن حالة الاستجابة كانت 2xx). إذا لم تكن response.ok صحيحة (على سبيل المثال، حالة 404 أو 500)، فإننا نرمي خطأً يدويًا ليتم التقاطه بواسطة كتلة catch.

    if (!response.ok) {
      throw new Error('فشل الاتصال بالخادم');
    }
    

5. تحليل جسم الاستجابة إلى JSON (response.json())

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

    const user = await response.json();
    

الآن، يحتوي المتغير user على كائن JavaScript يمثل بيانات المستخدم.

6. عرض البيانات في وحدة التحكم (console.log())

أخيرًا، نقوم بطباعة اسم المستخدم وعنوان بريده الإلكتروني إلى وحدة تحكم المتصفح أو Node.js باستخدام قوالب السلاسل النصية (template literals) لسهولة التنسيق.

    console.log(`اسم المستخدم: ${user.name}`);
    console.log(`البريد الإلكتروني: ${user.email}`);
    

7. استدعاء الدالة

لجعل الكود يعمل، يجب استدعاء الدالة fetchUserData().

fetchUserData();
    

كيفية تشغيل هذا الكود

يمكنك تشغيل هذا الكود بعدة طرق:

1. في متصفح الويب: افتح وحدة تحكم المطور (Developer Console) في متصفحك (عادةً بالضغط على F12)، ثم الصق الكود في علامة التبويب "Console" واضغط Enter. سترى المخرجات في وحدة التحكم.
2. باستخدام Node.js: احفظ الكود في ملف باسم app.js (أو أي اسم آخر)، ثم افتح سطر الأوامر (Command Line) في مجلد الملف وقم بتشغيله باستخدام الأمر node app.js.

تجربة عملية: ماذا لو حدث خطأ؟

لتجربة كتلة catch، يمكنك تغيير عنوان URL إلى عنوان غير صالح، مثلاً:

    const response = await fetch('https://jsonplaceholder.typicode.com/non-existent-endpoint');
    

عند تشغيل الكود المعدل، ستلاحظ أن رسالة الخطأ من كتلة catch ستظهر في وحدة التحكم بدلاً من بيانات المستخدم.