بسم الله الرحمن الرحيم
اللهم صلِّ وسلم وبارك على سيدنا محمد
مرحباً بزوار ومتابعي بلوجر فيومي!
الدرس الثالث: استخدام Fetch API في JavaScript
في الدرس النهاردة، هنتعلم إزاي نستخدم Fetch API للتعامل مع البيانات في JavaScript. Fetch API هي طريقة حديثة وسهلة لإجراء طلبات HTTP وتعتبر بديلًا أكثر قوة وسهولة من XMLHttpRequest.
1. ما هي Fetch API؟
Fetch API تُتيح لنا إجراء طلبات HTTP من السيرفر. باستخدام هذه الواجهة، يمكننا استرجاع بيانات من السيرفر أو إرسال بيانات جديدة إليه بسهولة. الأمر يشمل ثلاثة أنواع رئيسية من الطلبات:
- GET: لاسترجاع البيانات.
- POST: لإرسال البيانات إلى السيرفر.
- PUT وDELETE: لتحديث أو حذف البيانات.
2. مثال على استخدام Fetch API لعمل طلب GET
في المثال التالي، سنقوم بعمل طلب GET لاسترداد بيانات من ملف JSON. سنقوم باستخدام fetch() مع URL للملف JSON، وبعد ذلك نتحقق من استجابة السيرفر.
fetch('data.json')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
console.log(data);
})
.catch(error => {
console.error('حدث خطأ:', error);
});
في هذا الكود، نقوم بعمل طلب إلى 'data.json'. إذا كانت الاستجابة ناجحة (response.ok)، نقوم بتحويل البيانات إلى JSON باستخدام response.json(). ثم نقوم بعرض البيانات في وحدة التحكم. إذا حدث خطأ (مثل عدم وجود الملف)، سيتم التعامل معه في جزء catch.
3. مثال على استخدام Fetch API لعمل طلب POST
هنا، سنقوم بعمل طلب POST لإرسال بيانات إلى السيرفر. سنقوم بإنشاء كائن بيانات يحتوي على اسم المستخدم وكلمة المرور، ثم نستخدم fetch لإرسال البيانات.
const data = {
username: 'ahmed',
password: 'password123'
};
fetch('https://example.com/api/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
})
.then(response => response.json())
.then(data => {
console.log('نجاح:', data);
})
.catch((error) => {
console.error('خطأ:', error);
});
في هذا المثال، نحدد method على أنها 'POST'، ونقوم بإعداد headers لنخبر السيرفر بأننا نرسل بيانات بتنسيق JSON. نقوم بتحويل البيانات إلى JSON باستخدام JSON.stringify() ونرسلها في جسم الطلب. بعد ذلك، نتحقق من الاستجابة بنفس الطريقة التي قمنا بها في طلب GET.
4. الخاتمة
باستخدام Fetch API، يمكنك إجراء طلبات HTTP بشكل أكثر سهولة ووضوح. حاول استخدام Fetch API في مشاريعك لتحسين تجربة المستخدم والتفاعل مع البيانات. فهي توفر واجهة أكثر حداثة وسهولة مقارنة بالطرق القديمة.
في الدرس الجاي، هنتكلم عن Axios، مكتبة قوية لإجراء طلبات HTTP بشكل أسهل وأسرع. تابعونا لتتعلموا المزيد عن كيفية استخدام Axios وما يمكن أن تقدمه لمشاريعكم!
