كيف تستخدم JavaScript Fetch API: إرسال الطلبات ومعالجة الأخطاء وإلغاء الاتصالات

أبرز النقاط

• Fetch API هي الطريقة المدمجة لإجراء طلبات HTTP في المتصفحات الحديثة وNode.js 18+
• تعتمد على Promises مما يتيح استخدام async/await بدلاً من الأنماط القديمة مثل XMLHttpRequest
• يمكن إلغاء الطلبات البطيئة باستخدام AbortController للتحكم الكامل في دورة حياة الطلب

تُعدّ JavaScript Fetch API الأداة المدمجة لإجراء طلبات HTTP في المتصفحات الحديثة وبيئة Node.js بدءاً من الإصدار 18. تعتمد هذه الواجهة على Promises، مما يُتيح لك استخدام سلسلة .then() أو صيغة async/await الأكثر وضوحاً، بدلاً من الأنماط القديمة مثل XMLHttpRequest أو دالة $.ajax() في jQuery. في هذا الدليل العملي، ستتعلم إرسال طلبات GET وPOST، ومعالجة أخطاء HTTP بالطريقة الصحيحة، وإلغاء الطلبات البطيئة، مع مقارنة Fetch بكل من Ajax وAxios.

ما هي JavaScript Fetch API وكيف تعمل؟

Fetch API هي واجهة برمجية متوفرة في المتصفح وNode.js لطلب الموارد عبر بروتوكول HTTP. تُمرّر عنوان URL (أو كائن Request) إلى الدالة fetch()، فتُعيد Promise يُحلّ عند وصول ترويسات الاستجابة، حتى لو أعاد الخادم رمز خطأ. للاطلاع على المواصفات الكاملة، راجع وثائق MDN الرسمية.

كيف تبدأ باستخدام صيغة Fetch الأساسية؟

الصيغة الأبسط لاستدعاء fetch() هي تمرير عنوان URL فقط. تُعيد الدالة Promise، لذا تُلحقها بـ .then() لمعالجة الاستجابة الناجحة:

• fetch(url) تُعيد Promise يُحلّ عند استلام الترويسات
• .then() تُستخدم لمعالجة الاستجابة وتحويلها إلى JSON
• .catch() تلتقط أخطاء الشبكة فقط مثل انقطاع الاتصال أو فشل DNS

نقطة جوهرية: دالة .catch() لا تُنفَّذ عندما يُعيد الخادم رمز حالة مثل 404 أو 500. هذه الرموز تُعالَج داخل .then() بفحص الخاصية response.ok.

كيف تجلب البيانات من واجهة برمجية باستخدام GET؟

لنفترض أنك تريد جلب قائمة مستخدمين من واجهة JSONPlaceholder التجريبية وعرضها في صفحة HTML. أنشئ ملف authors.html يحتوي على عنوان وقائمة فارغة، ثم أضف كود JavaScript يستدعي fetch() ويتحقق من response.ok قبل تحليل JSON:

• استخدم getElementById للحصول على عنصر القائمة
• أنشئ DocumentFragment لتجميع العناصر قبل إضافتها للصفحة دفعة واحدة (أفضل للأداء)
• تحقق من response.ok قبل استدعاء response.json()

كيف تُرسل بيانات إلى الخادم باستخدام POST؟

لإرسال طلب POST، مرّر كائن options كمعامل ثانٍ لـ fetch() يتضمن method بقيمة POST، وheaders لتحديد نوع المحتوى، وbody يحتوي البيانات المُسلسلة بصيغة JSON:

• حدد method: 'POST' في كائن الخيارات
• أضف Content-Type: application/json في الترويسات
• استخدم JSON.stringify() لتحويل الكائن إلى نص JSON في body

كيف تُعالج الأخطاء بشكل صحيح مع Fetch API؟

الخطأ الشائع هو الاعتقاد بأن .catch() تلتقط جميع الأخطاء. في الواقع، Fetch لا تُعتبر رموز HTTP مثل 404 أو 500 أخطاءً تستدعي رفض Promise. الحل هو فحص response.ok داخل .then() ورمي خطأ يدوياً إذا كانت قيمتها false:

• افحص response.ok — تُعيد true فقط إذا كان رمز الحالة بين 200 و299
• ارمِ خطأ باستخدام throw new Error(response.status) إذا فشل الطلب
• التقط الخطأ في .catch() لعرض رسالة مناسبة للمستخدم

كيف تستخدم async/await مع Fetch لكود أوضح؟

صيغة async/await تجعل الكود أكثر قابلية للقراءة، خاصة مع سلاسل طلبات متعددة. ضع الكود داخل دالة async، واستخدم await قبل fetch() وقبل response.json(). لا تنسَ تغليف الكود بـ try/catch لمعالجة الأخطاء:

• أعلن الدالة بـ async
• استخدم await fetch(url) للانتظار حتى وصول الاستجابة
• استخدم await response.json() لانتظار تحليل البيانات
• غلّف الكود بـ try/catch لالتقاط الأخطاء

كيف تُلغي الطلبات البطيئة باستخدام AbortController؟

في التطبيقات الحقيقية، قد يُغادر المستخدم الصفحة أو يُلغي عملية البحث قبل اكتمال الطلب. هنا يأتي دور AbortController. أنشئ كائن controller، ومرّر controller.signal ضمن خيارات fetch()، ثم استدعِ controller.abort() لإلغاء الطلب:

• أنشئ const controller = new AbortController()
• مرّر signal: controller.signal في كائن options
• استدعِ controller.abort() عند الحاجة للإلغاء
• التقط خطأ AbortError في catch للتعامل مع الإلغاء

Fetch API مقابل Ajax وAxios: أيها تختار؟

Ajax (عبر XMLHttpRequest) هو النمط القديم الذي استُخدم لسنوات، لكنه يعتمد على callbacks متداخلة. Axios مكتبة خارجية توفر ميزات إضافية مثل التحويل التلقائي لـ JSON ودعم أفضل للأخطاء. أما Fetch فهي مدمجة في المتصفح، خفيفة الوزن، وكافية لمعظم الاستخدامات:

• Fetch: مدمجة، لا تحتاج تثبيت، تعتمد Promises
• Axios: مكتبة خارجية، تحويل JSON تلقائي، interceptors مدمجة
• XMLHttpRequest: قديمة، callbacks معقدة، لا تُستخدم في المشاريع الجديدة

استخدام Fetch API في أُطر JavaScript الحديثة

سواء كنت تعمل بـ React أو Vue أو Angular، تظل Fetch API خياراً صالحاً. في React، استدعِها داخل useEffect مع تنظيف عبر AbortController. في Vue، استخدمها في onMounted. المبدأ واحد: أرسل الطلب عند تحميل المكوّن، وألغِه عند إزالته لتجنب تسريب الذاكرة.

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

هل يدعم Fetch API جميع المتصفحات؟

نعم، جميع المتصفحات الحديثة تدعمها. للمتصفحات القديمة مثل Internet Explorer، تحتاج polyfill مثل whatwg-fetch.

لماذا لا تلتقط .catch() خطأ 404؟

لأن Fetch تعتبر الطلب ناجحاً طالما وصلت استجابة من الخادم. رموز الخطأ مثل 404 و500 تُعالَج بفحص response.ok يدوياً.

ما الفرق بين Fetch وAxios؟

Fetch مدمجة ولا تحتاج تثبيت، بينما Axios مكتبة خارجية توفر ميزات إضافية مثل interceptors والتحويل التلقائي لـ JSON.

كيف أُلغي طلب Fetch قيد التنفيذ؟

استخدم AbortController: أنشئ controller، مرّر signal في خيارات fetch، ثم استدعِ abort() للإلغاء.