JavaScript Academy · درس

التعامل مع الأخطاء ورموز الحالة

تحقّقوا من response.ok وتعاملوا مع حالات الفشل.

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

لا يرفض fetch عند حدوث أخطاء HTTP

هناك أمر مفاجئ ينبغي الانتباه إليه: لا يرفض fetch إلا عند حدوث إخفاقات في الشبكة. أما استجابة 404 أو 500 فتظل تُحل بنجاح. لذلك يجب أن تتحقق من الحالة بنفسك.

التحقق من response.ok

تكون قيمة response.ok هي true فقط لرموز الحالة الواقعة ضمن النطاق 200-299. استخدمها لاكتشاف أخطاء HTTP.

const response = await fetch(url);
if (!response.ok) {
  console.log("HTTP error:", response.status);
}

قراءة رمز الحالة

يعطيك response.status الرمز الرقمي، بينما يعطيك response.statusText رسالة قصيرة. استخدم هذه القيم للتعامل مع حالات محددة.

if (response.status === 404) console.log("Not found");
if (response.status === 401) console.log("Unauthorized");

إطلاق خطأ عند حالة غير ناجحة

من الأنماط الواضحة إطلاق كائن Error عندما لا تكون الاستجابة ناجحة، بحيث تتعامل كتلة catch واحدة مع إخفاقات الشبكة وHTTP معًا.

if (!response.ok) {
  throw new Error("Request failed: " + response.status);
}

التغليف ضمن try/catch

عند استخدام async/await، غلّف التدفق بأكمله ضمن try/catch. تؤدي أخطاء الشبكة إلى رفض Promise وتصل إلى catch، وينطبق الأمر نفسه على خطأ HTTP الذي أطلقته.

try {
  const res = await fetch(url);
  if (!res.ok) throw new Error("Status " + res.status);
  const data = await res.json();
} catch (err) {
  console.log("Failed:", err.message);
}

تمييز أنواع الأخطاء

يعني رفض fetch عادةً أن الخادم غير متاح، أو أن بحث DNS أخفق، أو أن CORS حظره. أما الاستجابة غير الناجحة فتعني أن الخادم أجاب، لكن بإشارة إلى وجود خطأ. تعامل مع الحالتين بشكل مختلف عندما يكون ذلك مهمًا.

قراءة أجسام الأخطاء

تعيد واجهات API غالبًا JSON يصف الخطأ. اقرأه قبل إطلاق الخطأ حتى تتمكن من عرض رسالة مفيدة.

if (!res.ok) {
  const errBody = await res.json().catch(() => ({}));
  throw new Error(errBody.message || ("Status " + res.status));
}

رموز الحالة الشائعة

تعرّف إلى الفئات: 2xx نجاح، و3xx إعادة توجيه، و4xx خطأ من العميل (أرسلت شيئًا غير صحيح)، و5xx خطأ من الخادم (الخلل من جهتهم). يتبع fetch معظم عمليات إعادة التوجيه تلقائيًا.

مساعد قابل لإعادة الاستخدام

ضع عملية التحقق في مساعد واحد، حتى تحصل كل نقطة استدعاء على معالجة أخطاء متسقة.

async function getJSON(url) {
  const res = await fetch(url);
  if (!res.ok) throw new Error("HTTP " + res.status);
  return res.json();
}

إعادة محاولة الإخفاقات المؤقتة

بالنسبة إلى الشبكات غير المستقرة، يمكنك إعادة المحاولة عند حدوث أخطاء 5xx أو أخطاء في الشبكة. اجعل عدد المحاولات قليلًا وأضف تأخيرًا لتجنب إرهاق الخادم بالطلبات.

for (let i = 0; i < 3; i++) {
  try { return await getJSON(url); }
  catch (e) { if (i === 2) throw e; }
}

عرض الأخطاء للمستخدم

التقط الأخطاء في طبقة واجهة المستخدم لعرض رسالة ودية بدلًا من شاشة فارغة. لا تسمح أبدًا بأن يبتلع رفض غير معالج فشل الطلب بصمت.

getJSON(url)
  .then(render)
  .catch(() => showToast("Could not load data"));

اختبار سريع

معالجة أخطاء fetch.

مراجعة

لا يرفض fetch إلا عند حدوث إخفاقات في الشبكة، لذلك تحقّق دائمًا من response.ok/response.status وأطلق خطأً عند الحالات غير الناجحة. غلّف الاستدعاءات ضمن try/catch، واقرأ أجسام الأخطاء للحصول على الرسائل، وضع عملية التحقق في مساعد واحد، واعرض أخطاء ودية في واجهة المستخدم.

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

هل درس «التعامل مع الأخطاء ورموز الحالة» مجاني؟

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

ماذا ستتعلم في «التعامل مع الأخطاء ورموز الحالة»؟

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

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

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

كم من الوقت يستغرق درس «التعامل مع الأخطاء ورموز الحالة»؟

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

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

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

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

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