شرح صفوف ومحتوى الفقرة
أشهر فخ برمجي في fetch(): لا يُرفض وعد fetch إلا عند انقطاع الشبكة الفعلي أو إلغاء الطلب أو حظر CORS؛ أما إذا رد الخادم بكود خطأ مثل 404 أو 500 فإن الوعد ينجح بشكل طبيعي! لذا افحص دائماً خاصية response.ok (التي تكون true للأكواد 200..299):
| الحالة الشبكية | هل يُرفض وعد fetch؟ | قيمة response.ok | الإجراء البرمجي الصحيح |
|---|---|---|---|
رد ناجح 200..299 | لا (يفي بكائن الاستجابة) | true | المتابعة لقراءة الجسم عبر await res.json() |
خطأ خادم 404 أو 500 | لا! (يعتبر وصول الرد نجاحاً شبكياً) | false | رمي خطأ صريح: if (!res.ok) throw ... |
| انقطاع اتصال أو إلغاء | نعم (يُرفض الوعد فوراً) | لا توجد استجابة | التقاط العطل داخل كتلة catch (err) |
JavaScript
const url = 'data:application/json,' +
encodeURIComponent('{"course":"JavaScript","lessons":159}');
async function loadCatalog() {
const out = document.getElementById('ft-out');
const res = await fetch(url);
if (!res.ok) throw new Error('HTTP ' + res.status);
const d = await res.json();
out.textContent = d.course + ': ' + d.lessons + ' lessons';
}
loadCatalog();