الهدف التعليمي

تعلم كيفية إدارة طلبات AJAX باستخدام الـ Promises في JavaScript، مع تطبيق عملي لجلب البيانات وعرضها بطريقة تفاعلية مع التعامل مع الأخطاء.

قائمة المستخدمين

الاسم البريد الإلكتروني العنوان الإجراءات
الشرح البرمجي
async function fetchUsers() {
    try {
        const response = await fetch('https://jsonplaceholder.typicode.com/users');
        if (!response.ok) throw new Error('فشل جلب البيانات');
        
        const users = await response.json();
        // بناء الجدول ديناميكيًا
        renderUsersTable(users);
        
    } catch (error) {
        showError(error.message);
    }
}

// عرض التفاصيل في نافذة منبثقة
async function showDetails(userId) {
    try {
        const response = await fetch(`${apiURL}/${userId}`);
        if (!response.ok) throw new Error('خطأ في الاتصال');
        
        const user = await response.json();
        displayUserModal(user);
        
    } catch (error) {
        showError(`تعذر جلب التفاصيل: ${error.message}`);
    }
}