جلب البيانات من API باستخدام Fetch

الدرس العشرون: جلب البيانات من API باستخدام Fetch

في هذا الدرس، سنتعرف على كيفية استخدام Fetch API لجلب البيانات من خوادم بعيدة. سنتناول كيفية استرجاع البيانات باستخدام fetch()، التعامل مع البيانات بصيغة JSON، وأيضًا كيفية إرسال POST Requests باستخدام fetch().

1. استخدام fetch() لاسترجاع البيانات من خادم بعيد

تعتبر Fetch API طريقة حديثة وغير متزامنة لجلب البيانات من الخوادم عبر بروتوكول HTTP. يمكنك استخدامها لاسترجاع البيانات بسهولة من API أو من أي مصدر آخر عبر الإنترنت.

مثال على جلب بيانات باستخدام fetch():

// جلب البيانات باستخدام Fetch API
fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    // التحقق إذا كانت الاستجابة ناجحة
    if (!response.ok) {
      throw new Error("Network response was not ok");
    }
    // تحويل البيانات إلى JSON
    return response.json();
  })
  .then(data => {
    // التعامل مع البيانات المسترجعة
    console.log(data);
  })
  .catch(error => {
    // معالجة الأخطاء
    console.error("There was a problem with the fetch operation:", error);
  });

شرح الكود:

• fetch() يقوم بإرسال طلب HTTP إلى الخادم.
• الدالة then() تستقبل الاستجابة، وفي حال كانت الاستجابة ناجحة، يتم تحويل البيانات إلى JSON باستخدام response.json().
• في حال وجود خطأ في الاتصال أو إذا كانت الاستجابة غير صالحة، يتم التعامل مع الخطأ باستخدام catch().

2. التعامل مع الـ JSON

البيانات التي يتم استرجاعها من الخوادم غالبًا ما تكون بصيغة JSON، لذا يجب عليك تحويل البيانات المسترجعة إلى تنسيق يمكن التعامل معه في JavaScript. تستخدم Fetch API دالة response.json() لتحويل البيانات إلى JSON.

مثال على التعامل مع JSON:

fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => response.json())  // تحويل البيانات إلى JSON
  .then(data => {
    // التعامل مع البيانات المسترجعة (JSON)
    data.forEach(post => {
      console.log(`Title: ${post.title}`);
      console.log(`Body: ${post.body}`);
    });
  })
  .catch(error => {
    console.error("Error fetching data:", error);
  });

في هذا المثال:

• البيانات التي تم استرجاعها من API تحتوي على مجموعة من المشاركات. يتم التعامل مع كل مشاركة واستخراج عنوانها وجسمها باستخدام JavaScript.

3. POST Requests باستخدام fetch()

إضافة إلى جلب البيانات، يمكن استخدام Fetch API لإرسال POST Requests إلى الخوادم. تستخدم POST لإرسال بيانات إلى الخادم، مثل إرسال بيانات نموذج أو إضافة معلومات جديدة.

مثال على إرسال بيانات باستخدام fetch():

// بيانات لنرسلها في POST Request
const newPost = {
  title: 'My New Post',
  body: 'This is the content of my new post.',
  userId: 1
};

// إرسال POST request إلى API
fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST', // تحديد أن هذا طلب POST
  headers: {
    'Content-Type': 'application/json' // تحديد نوع المحتوى كـ JSON
  },
  body: JSON.stringify(newPost) // تحويل البيانات إلى JSON
})
  .then(response => response.json())  // تحويل الاستجابة إلى JSON
  .then(data => {
    // التعامل مع الاستجابة بعد إرسال البيانات
    console.log('Post created:', data);
  })
  .catch(error => {
    console.error("Error with POST request:", error);
  });

شرح الكود:

• method: يتم تحديد طريقة الطلب، في هذه الحالة هي “POST”.
• headers: يحتوي على نوع البيانات المرسلة، وفي هذا المثال نحن نرسل بيانات بصيغة JSON، لذا نحدد Content-Type: application/json.
• body: يحتوي على البيانات التي نريد إرسالها. يتم تحويل الكائن newPost إلى JSON باستخدام JSON.stringify().

ملاحظات:

• عند استخدام POST، يجب التأكد من أن البيانات التي يتم إرسالها تتوافق مع تنسيق الخادم الذي ستتعامل معه.
• POST Requests تُستخدم بشكل شائع عند إرسال بيانات إلى الخوادم لإنشاء أو تحديث محتوى.

4. مقارنة GET و POST Requests باستخدام fetch()

لنقارن بين طلب GET و POST باستخدام fetch():

• GET Request: يتم استخدامه لاسترجاع البيانات من الخادم.
  • fetch() مع GET (افتراضيًا) يسترجع البيانات من الخادم.
  • لا يحتوي على body حيث لا يتم إرسال بيانات إضافية.

fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => response.json())
  .then(data => console.log(data));

• POST Request: يتم استخدامه لإرسال البيانات إلى الخادم.
  • يتم تحديد method كـ “POST”.
  • يتم تضمين body مع البيانات التي نريد إرسالها.

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ title: 'New Post', body: 'This is a new post', userId: 1 })
})
  .then(response => response.json())
  .then(data => console.log(data));

الخلاصة

• Fetch API هي طريقة قوية لجلب البيانات من الخوادم باستخدام GET و POST Requests.
• يمكن التعامل مع JSON باستخدام response.json() لتحويل الاستجابة إلى تنسيق يمكن التعامل معه في JavaScript.
• GET يُستخدم لاسترجاع البيانات، بينما POST يُستخدم لإرسال البيانات إلى الخوادم.
• باستخدام Fetch API، يمكن بناء تطبيقات ويب تفاعلية تدير البيانات بشكل غير متزامن، مما يحسن تجربة المستخدم ويجعل التطبيق أكثر كفاءة.

بذلك، يمكنك استخدام Fetch API لاسترجاع البيانات وإرسالها في تطبيقات الويب الخاصة بك.