JavaScript Academy · درس

إجراء طلبات GET

اجلبوا البيانات وحلّلوا استجابات JSON.

إجراء طلبات GET درس مجاني في JavaScript Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في JavaScript Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة JavaScript Academy 4 دروس في المجموع.

ما الذي يفعله fetch

تُجري Fetch API طلبات HTTP من المتصفح وتعيد Promise. وهي البديل الحديث لـ XMLHttpRequest القديم.

طلب GET أساسي

استدعِ fetch(url) مع عنوان URL. ويستخدم هذا الاستدعاء طريقة GET افتراضيًا، ويُنجز بقيمة Response.

fetch("https://api.example.com/users")
  .then((response) => {
    console.log(response.status); // 200
  });

كائن Response

القيمة المُنجزة هي Response وليست البيانات نفسها. فهي تحمل الحالة والترويسات وطرائق قراءة النص الأساسي. ويجب أن تستدعي طريقة لقراءة النص الأساسي للحصول على المحتوى.

fetch(url).then((response) => {
  console.log(response.ok);     // true if status 200-299
  console.log(response.status); // 200
});

تحليل JSON

تعيد معظم واجهات API بيانات بصيغة JSON. استدعِ response.json()، إذ تعيد هذه الطريقة نفسها Promise يُنجز بالكائن الذي جرى تحليله.

fetch(url)
  .then((response) => response.json())
  .then((data) => {
    console.log(data); // parsed JS object/array
  });

لماذا يوجد وعدين

يُنجز الوعد الأول عند وصول الترويسات، بينما يُنجز الوعد الثاني (.json()) عند تنزيل النص الأساسي كاملًا وتحليله. ولهذا تربط استدعاءين من .then() على التوالي.

استخدام async/await

تستخدم معظم الشيفرات async/await لتحسين سهولة القراءة. يوقف كل await التنفيذ مؤقتًا حتى يُنجز الوعد الخاص به.

async function getUsers() {
  const response = await fetch(url);
  const data = await response.json();
  return data;
}

قارئات النص الأساسي الأخرى

بالإضافة إلى json()، يمكن قراءة Response باستخدام text() أو blob() (للبيانات الثنائية) أو arrayBuffer() أو formData(). اختر الطريقة وفقًا لما يعيده الخادم.

const response = await fetch(url);
const html = await response.text(); // raw string

لا يُقرأ النص الأساسي إلا مرة واحدة

النص الأساسي للاستجابة عبارة عن تدفق لا يمكنك استهلاكه إلا مرة واحدة. يؤدي استدعاء json() ثم text() على الاستجابة نفسها إلى إطلاق خطأ. استخدم response.clone() إذا كنت تحتاج فعلًا إلى قراءته بالطريقتين.

معاملات الاستعلام

أنشئ سلاسل الاستعلام بأمان باستخدام URLSearchParams بدلًا من ربطها يدويًا. فهو يرمّز الأحرف الخاصة نيابةً عنك.

const params = new URLSearchParams({ page: 2, q: "hello world" });
fetch("https://api.example.com/search?" + params);

إرسال الترويسات

مرّر وسيطًا ثانيًا يحتوي على الخيارات. في طلبات GET، غالبًا ما تضبط ترويسة Accept أو رمز مصادقة.

fetch(url, {
  headers: {
    "Accept": "application/json",
    "Authorization": "Bearer " + token
  }
});

إعادة الوعد

ضع منطق fetch داخل دالة تعيد الوعد، حتى يتمكن المستدعي من استخدام await معه. وهذا يحافظ على قابلية إعادة استخدام تحميل البيانات في أنحاء تطبيقك.

function loadUser(id) {
  return fetch("/api/users/" + id).then((r) => r.json());
}

تحقق سريع

طلبات GET باستخدام fetch.

مراجعة

تعيد fetch(url) وعدًا بقيمة Response. اقرأ النص الأساسي باستخدام json() أو text() أو blob() (مرة واحدة فقط). استخدم async/await للوضوح، وURLSearchParams لسلاسل الاستعلام، وكائن خيارات للترويسات. ضع ذلك في دوال تعيد الوعد لإعادة استخدامه.

الأسئلة الشائعة

هل درس «إجراء طلبات GET» مجاني؟

نعم — نص درس «إجراء طلبات GET» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة JavaScript Academy، انتقل إلى CoddyKit PRO. تتضمن دورة JavaScript Academy 4 دروس في المجموع.

ماذا ستتعلم في «إجراء طلبات GET»؟

اجلبوا البيانات وحلّلوا استجابات JSON. تتمرن على JavaScript Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ JavaScript Academy؟

لا تُشترط خبرة سابقة. JavaScript Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «إجراء طلبات GET»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس JavaScript Academy هذا؟

نعم. كل درس في JavaScript Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى JavaScript Academy