مقدمة
في الدرس السابق تعرفنا على async/await، وعرفنا كيف تساعدنا على التعامل مع العمليات غير المتزامنة بطريقة أكثر وضوحًا.
لكن كيف يمكن لـ JavaScript أن تتواصل مع خادم أو تجلب بيانات من الإنترنت؟
هنا يأتي دور Fetch API.
ما هي Fetch API؟
fetch() هي أداة مدمجة في JavaScript تسمح بإرسال طلبات HTTP والتواصل مع الموارد الموجودة على الشبكة.
ومن أشهر استخداماتها جلب البيانات من APIs.
لماذا نستخدم fetch()؟
يمكن استخدامها للحصول على بيانات من خادم خارجي دون الحاجة إلى تحديث الصفحة بالكامل.
وهذا يجعلها مهمة جدًا في تطبيقات الويب الحديثة.
كيف تعمل العملية؟
بشكل عام تمر عملية جلب البيانات بعدة مراحل:
1. إرسال طلب إلى الخادم
2. انتظار استجابة الخادم
3. استقبال الاستجابة
4. قراءة البيانات
5. استخدام البيانات داخل التطبيق
وغالبًا يتم التعامل مع هذه العملية باستخدام Promises وasync/await.
ما هي API؟
API اختصار لـ Application Programming Interface.
وهي طريقة تسمح لبرنامج بالتواصل مع برنامج أو خدمة أخرى.
مثلًا يمكن لتطبيق الطقس طلب بيانات الطقس من خادم خارجي عن طريق API.
أنواع طلبات HTTP
يمكن استخدام fetch() مع أنواع مختلفة من طلبات HTTP، ومن أشهرها:
GET لجلب البيانات
POST لإرسال بيانات
PUT لتحديث بيانات
DELETE لحذف بيانات
ويعتمد النوع المناسب على العملية التي يريد التطبيق تنفيذها.
التعامل مع الاستجابة
عند وصول الاستجابة من الخادم، يجب التأكد من حالتها ثم قراءة البيانات بالشكل المناسب.
وقد تكون البيانات مثلًا بصيغة JSON، وهي صيغة شائعة لتبادل البيانات بين التطبيقات والخوادم.
fetch() و async/await
تعمل fetch() بشكل غير متزامن، ولذلك يمكن استخدامها مع async/await لتسهيل قراءة الكود وتنظيم خطوات التعامل مع البيانات.
وهذا يجعلها مناسبة جدًا للتطبيقات التي تعتمد على البيانات القادمة من الإنترنت.
التعامل مع الأخطاء
قد يفشل الطلب بسبب مشاكل في الاتصال أو الخادم أو عنوان المورد.
لذلك من المهم التعامل مع الأخطاء وإظهار نتيجة مناسبة للمستخدم بدلًا من ترك التطبيق يتعامل مع المشكلة بطريقة غير منظمة.
استخدام Fetch API في المشاريع
تستخدم fetch() في العديد من التطبيقات، مثل:
تطبيقات الطقس
المتاجر الإلكترونية
تطبيقات الأخبار
تطبيقات التواصل
لوحات البيانات
التطبيقات التي تعتمد على APIs
فوائد Fetch API
من أهم فوائدها:
جلب البيانات من الإنترنت
إرسال البيانات إلى الخوادم
التعامل مع APIs
دعم العمليات غير المتزامنة
العمل بشكل جيد مع Promises وasync/await
أخطاء شائعة عند المبتدئين
من الأخطاء الشائعة:
نسيان انتظار نتيجة fetch()
عدم التعامل مع الأخطاء
عدم التحقق من حالة الاستجابة
الخلط بين الاستجابة نفسها والبيانات الموجودة داخلها
محاولة استخدام البيانات قبل الانتهاء من جلبها
ملخص الدرس
تعرفنا في هذا الدرس على Fetch API، وعرفنا كيف يمكن استخدام fetch() للتواصل مع الخوادم وجلب البيانات من الإنترنت، كما تعرفنا على APIs وطلبات HTTP وعلاقة fetch() بـ Promises وasync/await.
في الدرس الثالث والثلاثون سنتعرف على JSON، وسنفهم كيف يتم تنظيم البيانات وتبادلها بين JavaScript والخوادم.