JavaScript - Fetch API

JavaScript Fetch API – جلب البيانات من الخوادم

🔸 تُستخدم Fetch API في JavaScript لإرسال واستقبال البيانات من خوادم الويب باستخدام بروتوكول HTTP. وهي بديل حديث وسهل الاستخدام لـ XMLHttpRequest.

---

🔹 شكل استخدام Fetch

fetch("https://api.example.com/data")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error("خطأ:", error));

📌 fetch() تُرجع Promise، لذا يتم استخدام then() للتعامل مع النتيجة، وcatch() للأخطاء.

---

🔹 إرسال بيانات باستخدام POST

fetch("https://api.example.com/users", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    name: "Mahmoud",
    age: 40
  })
})
  .then(response => response.json())
  .then(data => console.log("تم الحفظ:", data))
  .catch(error => console.error("حدث خطأ:", error));

📌 عند استخدام POST يجب تحديد headers وتحديد body بصيغة JSON.

---

🔹 استجابة بصيغة نص أو JSON

// نص عادي:
fetch("file.txt")
  .then(response => response.text())
  .then(text => console.log(text));

// JSON:
fetch("data.json")
  .then(response => response.json())
  .then(obj => console.log(obj));

---

📌 مميزات Fetch

• أسهل وأكثر قراءة من XMLHttpRequest.
• تُعيد Promise بشكل افتراضي.
• تُستخدم على نطاق واسع في تطبيقات الويب الحديثة.

---

⚠️ ملاحظات مهمة

• fetch لا تعتبر استجابة 404 أو 500 كـ "خطأ"، لذا يجب التحقق يدويًا من response.ok.
• في بعض الحالات تحتاج إلى إذن CORS عند طلب بيانات من سيرفر خارجي.