API اختصار لـ Application Programming Interface، وهو طريقة متّفق عليها تجعل برنامجَين يتحدّثان مع بعضهما. عندما يعرض موقعك الطقس، فليس موقعك من يحسب الطقس، هو يسأل API خاص بخدمة الطقس ويحصل على الجواب ويعرضه.
يمكنك تخيّل الـ API كنادل في مطعم: أنت تطلب، هو يوصل الطلب للمطبخ (السيرفر)، ثم يرجع لك بالوجبة (البيانات). أنت لا تعرف كيف يُطبخ الطعام ولا تهتم، كل ما يهم أن الطلب يخرج صحيحاً. معظم التطبيقات الحديثة مبنية فوق شبكة كاملة من الـ APIs المتصلة.
أغلب الـ APIs الحديثة تتبادل البيانات بصيغة JSON (JavaScript Object Notation). وهي صيغة نصّية بسيطة تشبه كائنات JavaScript، سهلة القراءة للبشر والآلات معاً. مثال: {"name":"Zaid","role":"dev"}.
في كل طلب HTTP فيه method يحدد نوع العملية: GET لجلب البيانات، POST لإرسال بيانات جديدة، PUT/PATCH للتعديل، و DELETE للحذف. اختيار الـ method الصحيح مهم جداً عند بناء API احترافي، لأنه يعكس القصد من العملية.
Fetch API هي الطريقة الحديثة لإرسال طلبات HTTP من المتصفح. مثال بسيط: fetch("https://api.example.com/data").then(r => r.json()).then(data => console.log(data));. تعيد لك Promise، وعندما يكتمل الطلب تحصل على الـ response، ثم تحوّله لـ JSON.
الأفضل استخدام async/await ليصبح الكود أوضح وأسهل للصيانة: const res = await fetch(url); const data = await res.json();. هذا الأسلوب يشبه الكود المتتابع العادي لكنه في الحقيقة غير متزامن، وهو الأسلوب السائد اليوم في المشاريع الجادّة.
تعامل دائماً مع الأخطاء: استخدم try/catch وتحقّق من response.ok قبل تحويل البيانات. الشبكة قد تفشل، والسيرفر قد يرجع خطأ، ويجب أن يكون موقعك جاهزاً لهذه الحالات بدل أن ينهار أمام المستخدم.
لا تكشف مفاتيح الـ API في الكود من جهة العميل، ضعها في السيرفر. انتبه لمسألة CORS لأن بعض الـ APIs لا تسمح بالاتصال المباشر من المتصفح. وأخيراً اقرأ التوثيق (Documentation) الخاص بأي API قبل استخدامه؛ التوثيق الجيد يوفّر عليك ساعات من المحاولة والخطأ.
Share This Post