جلب و ارسال البيانات من خلال 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 توفر ذلك بشكل تلقائي.