التحول الرقمي للشركات: من أين تبدأ؟

الدرس الواحد والعشرون: التعامل مع الـ APIs في JavaScript – كيفية استدعاء البيانات من الإنترنت

 

الدرس الواحد والعشرون: التعامل مع الـ APIs في JavaScript – كيفية استدعاء البيانات من الإنترنت 🌐

---

العنوان:

كيفية استخدام الـ APIs (واجهات البرمجة للتطبيقات) في JavaScript لاستدعاء البيانات من الإنترنت.

---

المقدمة:

الـ APIs تعتبر من الأدوات الأساسية للتفاعل مع البيانات عبر الإنترنت، سواء كانت من قواعد بيانات خارجية، مواقع ويب، أو خدمات ويب أخرى. في هذا الدرس، سنتعلم كيفية استخدام الـ APIs لاستدعاء البيانات باستخدام fetch() وكيفية التعامل معها.

---

ما هو الـ API؟

• الـ API (واجهة البرمجة للتطبيقات) هي مجموعة من الأدوات والوظائف التي تتيح للتطبيقات التفاعل مع بعضها البعض.
• يمكن من خلالها إرسال واستقبال البيانات بين تطبيقك والعديد من المصادر الخارجية مثل مواقع الويب أو قواعد البيانات.

---

كيفية استخدام الـ APIs في JavaScript باستخدام fetch()

1. استخدام fetch لاستدعاء بيانات من API:

fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => response.json())  // تحويل البيانات إلى JSON
  .then(data => console.log(data))     // عرض البيانات
  .catch(error => console.log('Error:', error));  // التعامل مع الأخطاء

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

---

كيفية التعامل مع بيانات الـ JSON:

مثال: استعراض قائمة المستخدمين:

fetch('https://jsonplaceholder.typicode.com/users')
  .then(response => response.json())  // تحويل البيانات إلى JSON
  .then(users => {
    users.forEach(user => {
      console.log(user.name);  // عرض اسم كل مستخدم
    });
  })
  .catch(error => console.log('Error:', error));

في هذا المثال، نقوم باستدعاء قائمة المستخدمين من API وهمي، ثم نعرض أسماء المستخدمين باستخدام .forEach().

---

التعامل مع البيانات باستخدام async و await:

بدلاً من استخدام .then(), يمكننا استخدام async و await للحصول على كود أكثر نظافة وسهولة:

async function getUsers() {
  try {
    let response = await fetch('https://jsonplaceholder.typicode.com/users');
    let users = await response.json();
    users.forEach(user => {
      console.log(user.name);  // عرض أسماء المستخدمين
    });
  } catch (error) {
    console.log('Error:', error);
  }
}
getUsers();

باستخدام async/await، جعلنا الكود أكثر وضوحًا وأقل تعقيدًا.

---

تمارين عملية:

1. صمم تطبيقًا يعرض قائمة من المقالات من الـ API باستخدام fetch وعرض تفاصيل كل مقال عند النقر عليه.
2. أنشئ تطبيقًا يعرض قائمة من المستخدمين باستخدام بيانات JSON من API، وقم بعرض معلومات المستخدم عند النقر على اسمه.

---

وختامًا:

تعلمنا في هذا الدرس كيفية استدعاء البيانات من الإنترنت باستخدام الـ APIs وfetch(). أصبحت لديك القدرة على دمج التطبيقات مع بيانات حية من الإنترنت. في الدرس القادم، سنختتم سلسلتنا بتلخيص شامل لأساسيات JavaScript وأفضل الممارسات التي يجب أن تتبعها!

تعديل المقال