الدرس الثلاثون: جلب البيانات من API باستخدام fetch في JavaScript

 عند بناء تطبيقات ويب ديناميكية، غالبًا ما تحتاج إلى جلب بيانات من خوادم خارجية، مثل الأخبار أو الطقس أو بيانات المستخدمين.

هنا يأتي دور fetch.

---

1. ما هو fetch؟

fetch() هي طريقة حديثة في JavaScript تُستخدم لجلب البيانات من رابط (API) وترجع وعدًا (Promise).

---

2. الشكل الأساسي لاستخدام fetch

fetch("https://api.example.com/data")
  .then(response => response.json()) // تحويل البيانات إلى JSON
  .then(data => {
    console.log(data); // التعامل مع البيانات
  })
  .catch(error => {
    console.error("حدث خطأ:", error);
  });

---

3. مثال واقعي: جلب مستخدمين من API

<button onclick="getUsers()">جلب المستخدمين</button>
<ul id="userList"></ul>

<script>
  function getUsers() {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(res => res.json())
      .then(users => {
        let list = document.getElementById("userList");
        list.innerHTML = "";
        users.forEach(user => {
          let li = document.createElement("li");
          li.textContent = `${user.name} (${user.email})`;
          list.appendChild(li);
        });
      })
      .catch(err => {
        console.error("فشل في تحميل البيانات:", err);
      });
  }
</script>

---

4. إرسال بيانات إلى API باستخدام POST

fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    title: "تجربة",
    body: "هذا نص تجريبي",
    userId: 1
  })
})
.then(res => res.json())
.then(data => console.log(data))
.catch(error => console.error("خطأ:", error));

---

✅ ملخص الدرس:

الوظيفة	الوصف
fetch(url)	لجلب البيانات من عنوان API معين
.then()	لمعالجة البيانات بعد تحميلها
.catch()	لالتقاط الأخطاء أثناء التحميل
response.json()	لتحويل الاستجابة إلى JSON