جلب و ارسال البيانات من خلال Api

أولاً من يستخدم jQuery في الوقت الحالي؟ لا حاجة إليها على الإطلاق، هي موجودة فقط لمن يواجه صعوبة في تعلم لغة جافاسكريبت أو يريد اختصار الأمر وليس لديه وقت، لكن طالما تعلمت C# فجافاسكريبت أسهل بمراحل، أتفهم أنها غير منطقية لكن أسهل من C#.

أيضًا عليك إبقاء الأمر بسيط قدر الإمكان، وتجنب استخدام wrappers طالما تستطيع تنفيذ الأمر من خلال المكتبة الأساسية، فأنت بالأصل تريد التخلص من تكرار كود $.ajax أو ما يشبهه وفي مشروع واقعي لا تحتاج مكتبة متقدمة لتحقيق ذلك، بل ملف خدمة واحد apiClient.js تبني فيه دالة مساعدة عامة، ثم تشتق منها دوال CRUD وانتهى الأمر.

import axios from 'axios';

const apiClient = axios.create({
  baseURL: '/api',
  headers: { 'Content-Type': 'application/json' }
});

async function request(config) {
  try {
    const response = await apiClient(config);
    return response.data;
  } catch (error) {
    console.error('API Error:', error.response?.data || error.message);
    throw error; 
  }
}

export default request;

وأي تعديل مستقبلي مثل إضافة interceptor للتوكن سيكون في apiClient.js فقط.

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

وللتوضيح أكثر لو لديك 4-5 موارد كمنتجات، مستخدمين، طلبات وخلافه، فبناء خدمة كما بالأعلى يستغرق 5 دقائق لكل واحد، لكن لو المشروع يضم 40-50 مورد، فكتابة الدوال بنفسك أمر غير عملي وعرضة للخطأ، هنا تظهر قيمة دوال مثل createService('products') الجاهزة التي تحدث عن نفسها.

أيضًا عند الحاجة لإدارة حالة متكاملة Caching, Loading, Infinite Scroll، بمعنى ليس جلب بيانات وعرضها فقط بل بدأت تكتب كود لإلغاء الطلبات المتكررة، أو تخزين الاستجابات مؤقتًا لتجنب إعادة الجلب، أو إدارة حالة التحميل والخطأ بنفسك في كل مرة، فهنا مكتبة Alova توفر ذلك بشكل تلقائي.

المشكلة ليست في jQuery أو Axios ، بل في غياب طبقة تجريد فوق طلبات الـ HTTP. والحل الصحيح هو بناء هذه الطبقة بنفسك أو استخدام مكتبة تفعل ذلك.

ولذلك يمكنك إنشاء ملف واحد يحتوي على كل منطق الـ HTTP، ثم استدعاؤه من أي مكان.

وإذا كنت تستخدم أي Framework مثل React أو Vue داخل صفحاتك، فـ TanStack Query ممتازة . وتحل مشكلة الـ caching والـ loading states والـ error handling تلقائيًا.

وأيضاً يوجد HTMX وهذه المكتبة أصبحت شائعة جدًا مع مشاريع MVC التقليدية لأنها تتفق مع فلسفة Server-Side Rendering. بدلًا من كتابة JavaScript، تضيف attributes مباشرة في HTML

وعليكم السلام ورحمة الله وبركاته.

إذا كان هدفك الأساسي هو تقليل كود الـ JS وجعل واجهة المستخدم تفاعلية، فإن HTMX هي الخيار الأمثل والأكثر إستخداما حاليا لتطبيقات الخوادم (Server-rendered)

الفكرة: بدلا من كتابة كود Axios أو fetch لجلب البيانات ثم حقنها يدوياً في الـ DOM تتيح لك HTMX إرسال طلبات AJAX مباشرة من خلال خصائص HTML (Attributes) هكذا :

<!-- هذا الزر سيقوم بطلب GET ويضع النتيجة داخل العنصر الذي يحمل الـ id المحدد -->
<button hx-get="/Products/GetList" hx-target="#products-container">
    تحميل المنتجات
</button>

هذا السطر يغنيك عن كتابة أي دالة JavaScript فالمكتبة تقوم بالطلب وتحديث الجزء المحدد في الصفحة بال HTML أو ال Partial View المعاد من الـ Controller.

ثانيا مكتبة Alpine.js : إذا كنت تحتاج إلى التعامل مع ال JSON المسترجع من ال API فإن Alpine.js توفر لك طريقة منظمة للتعامل مع الحالة (State) والبيانات داخل ال HTML مباشرة وتدمج بسهولة مع ال Fetch API المدمج في المتصفح أو Axios، وتقوم بربط البيانات بالواجهة (Data Binding) بشكل تفاعلي مما يقلل من كود ال DOM Manipulation مثل document.getElementById.