طلبات Fetch: إدارة الانتظار والفشل والإلغاء

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

الفكرة الأساسية

لا يعني اكتمال fetch أن حالة HTTP ناجحة؛ يجب فحص response.ok ثم التحقق من شكل البيانات. يساعد AbortController في إلغاء طلب لم تعد نتيجته مطلوبة، بينما تمنع مقارنة معرف الطلب تطبيق نتيجة متأخرة.

خطوات عملية

1. أظهر حالة تحميل في منطقة النتائج مع إبقاء عناصر التحكم مفهومة.
2. تحقق من الحقول الأساسية في الاستجابة قبل إدخال المحتوى في الواجهة.
3. وفّر إعادة المحاولة مع الاحتفاظ بعبارة البحث والخيارات التي اختارها المستخدم.

مثال تطبيقي

إذا بحث المستخدم عن كلمة ثم غيّرها سريعًا، ألغِ الطلب الأول أو تجاهل نتيجته. يجب أن تعكس البطاقات آخر بحث مطلوب، لا آخر استجابة وصلت.

خطأ شائع ينبغي تجنبه

لا تعرض محتوى HTML غير موثوق مباشرة. استخدم إنشاء العناصر والنصوص أو مسار تنقية مناسب، ولا تعتبر فحص صيغة JSON بديلًا لحماية المحتوى.

مثال تقني مبسّط

المقتطف التالي يوضح الفكرة، ويحتاج إلى تكييف مع بنية مشروعك ومساراته والتحقق المناسب قبل استخدامه.

const response = await fetch("/api/articles", { signal: controller.signal });
if (!response.ok) throw new Error("Request failed");
const data = await response.json();
if (!Array.isArray(data.items)) throw new Error("Unexpected response");

للتوسع في الموضوع

التوثيق والمرجع الرسمي

صور توضيحية: الغلاف من Unsplash، الصورة الداخلية من Unsplash. ترخيص الاستخدام.