تحدث مع السيرفر: Async & APIs 🌐

دليل السيطرة على البيانات الخارجية وبناء تطبيقات حية تستمد قوتها من السحاب.

1. البرمجة غير المتزامنة (Asynchronous JS)

جافا سكريبت بطبعه "أحادي المسار" (Single Threaded)، أي أنه ينفذ أمراً واحداً في الوقت نفسه. لو طلبت منه تحميل ملف كبير، سيتوقف الموقع كله حتى ينتهي التحميل!

الحل: نظام "الانتظار الذكي"

بدلاً من تجميد الموقع، يرسل JS المهمة للمتصفح ويقول له: "أخبرني عندما تنتهي، سأكمل أنا بقية المهام الآن".

تخيل أنك في مطعم: - **Synchronous:** الجرسون يأخذ طلبك ويقف أمام المطبخ ينتظر الأكل ولا يخدم أي طاولة أخرى. - **Asynchronous:** الجرسون يأخذ طلبك، يعطيه للمطبخ، ويذهب لخدمة طاولات أخرى حتى يجهز طعامك.

2. الوعود (Promises)

الـ Promise هو كائن يمثل "وعداً" بأن بيانات ما ستأتي في المستقبل. هذا الوعد له 3 حالات:

3. ما هو الـ API؟

الـ API (Application Programming Interface) هو "النادل" الذي يربط موقعك بقاعدة بيانات خارجية. أنت تطلب منه (Request) وهو يرد عليك ببيانات (Response) غالباً تكون بصيغة JSON.

استخدام Fetch و Async/Await (الطريقة الحديثة):

هذه هي الطريقة التي يستخدمها المحترفون اليوم لجعل الكود يبدو كأنه كود عادي بسيط ولكنه يعمل في الخلفية.

// آلة جلب البيانات من السيرفر
async function getGameData() {
  try {
    // 1. إرسال الطلب وانتظار الرد
    const response = await fetch('https://api.example.com/games');

    // 2. تحويل الرد إلى صيغة JSON مفهومة
    const data = await response.json();

    // 3. استخدام البيانات
    console.log(data);
  } catch (error) {
    // في حال انقطع الإنترنت أو حدث خطأ
    console.error("فشل الجلب:", error);
  }
}

4. لغة تداول البيانات (JSON)

الـ JSON (JavaScript Object Notation) هو الطريقة التي تكتب بها البيانات لكي يفهمها أي سيرفر في العالم. يشبه الـ Object في JS ولكنه نصي.

{
  "game": "War Tycoon",
  "price": 0,
  "isMultiplayer": true
}

اختبار مهندس السحاب 🧠

س1: لماذا نستخدم كلمة await قبل الـ Fetch؟



س2: أي حالة من حالات الـ Promise تعني أن البيانات وصلت بنجاح؟



س3: ما هي وظيفة try { ... } catch { ... }؟