JavaScript • المستوى الرابع • الدرس 2
العودة لفهرس المستوىاستدعاء البيانات بـ Fetch API والمشروع النهائي
أهداف المشروع النهائي
- استخدام دالة
fetch()لجلب البيانات الحية من الخوادم عبر واجهات APIs. - تحويل الاستجابة إلى صيغة
JSONوقراءتها برمجياً. - عرض البيانات المستدعاة داخل عناصر بطاقات الـ DOM وتنسيقها ديناميكياً.
- تتويج مسار JavaScript ببناء تطبيق كامل متفاعل مع الخوادم.
1. كيفية التعامل مع Fetch API
تُستخدم fetch() لإرسال طلبات شبكية للحصول على بيانات خارجيّة بأسلوب غير متزامن دون إعادة تحميل الصفحة:
javascript
async function loadPosts() {
// 1. طلب البيانات من الـ API
let response = await fetch("https://jsonplaceholder.typicode.com/posts/1");
// 2. تحويل الاستجابة لنص منظم JSON
let data = await response.json();
console.log("عنوان المنشور:", data.title);
} التطبيق العملي المباشر
تحدي إكمال المشروع النهائي
قم بالضغط على زر "تشغيل الكود" أولاً، ثم اضغط على زر "جلب المستخدمين من API" في المعاينة لمشاهدة جلب البيانات حياً.
بعد التأكد من عمل الكود، قم بإضافة التحديثات التالية:
- غيّر الرابط لجلب 5 مستخدمين بدلاً من 3 عن طريق تغيير
_limit=3إلى_limit=5. - أضف سطراً جديداً في كل بطاقة يعرض المدينة عبر
user.address.city.
محرر الأكواد — HTML
14px
جارٍ تهيئة البيئة...
المخرجات — المخرجات
الكونسول (Console)
13px
nahda@runner — html
0 lines
(لا يوجد إخراج)
HTMLLn 54, Col 1UTF-8Spaces: 2
1474 chars