التفاعل مع الـ APIs في React (Fetch API)

الدرس الرابع عشر: التفاعل مع الـ APIs في React (Fetch API)

في هذا الدرس، سنتعلم كيفية التفاعل مع الـ APIs في React باستخدام Fetch API. سنتناول كيفية جلب البيانات من الخوادم البعيدة، والتعامل مع Promises باستخدام async/await، وكيفية عرض البيانات المحملة في واجهة المستخدم.

1. ما هو Fetch API؟

Fetch API هو واجهة برمجة تطبيقات (API) تتيح لك جلب البيانات من الخوادم البعيدة (مثل خوادم RESTful APIs) بطريقة غير متزامنة باستخدام JavaScript Promises. يتيح لك هذا العمل مع البيانات التي قد تستغرق وقتًا لتحميلها دون التأثير على تجربة المستخدم.

2. كيفية استخدام Fetch لجلب البيانات من API

يمكنك استخدام fetch() لاسترجاع البيانات من API. تُعيد fetch() Promise يمثل استجابة الخادم، ويمكنك التعامل مع البيانات بعد تحميلها باستخدام then() أو async/await.

مثال بسيط باستخدام fetch مع then():

import React, { useEffect, useState } from 'react';

function App() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(response => response.json())
      .then(data => {
        setData(data);
        setLoading(false);
      })
      .catch(error => {
        console.error('Error fetching data:', error);
        setLoading(false);
      });
  }, []);

  if (loading) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {data.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

الشرح:

• هنا، قمنا باستخدام fetch() لجلب البيانات من API jsonplaceholder.typicode.com.
• بمجرد تحميل البيانات، نقوم بتحديث state باستخدام setData.
• استخدمنا then() لتحويل الاستجابة إلى JSON ثم تحديث الـ state بالبيانات.
• عند حدوث خطأ أثناء جلب البيانات، نقوم بطباعته في console.

3. التعامل مع Promise باستخدام async/await

في حالة كانت لديك دالة غير متزامنة (asynchronous function) وتريد كتابة الكود بشكل أكثر تنظيمًا، يمكنك استخدام async/await بدلاً من then().

مثال على استخدام async/await:

import React, { useEffect, useState } from 'react';

function App() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts');
        const result = await response.json();
        setData(result);
        setLoading(false);
      } catch (error) {
        console.error('Error fetching data:', error);
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  if (loading) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {data.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

الشرح:

• قمنا بتحويل دالة fetchData إلى دالة غير متزامنة باستخدام async.
• داخلها، استخدمنا await لجلب البيانات من الـ API ثم تحويلها إلى JSON.
• تم التعامل مع الأخطاء باستخدام try/catch.
• من خلال هذا النهج، يكون الكود أكثر وضوحًا وسهل القراءة مقارنة باستخدام then().

4. عرض البيانات المحملة في واجهة المستخدم

بعد جلب البيانات باستخدام fetch()، يمكننا عرضها في واجهة المستخدم. في المثالين أعلاه، نعرض قائمة من المقالات المحملة من API داخل عنصر <ul>.

5. إظهار رسالة تحميل أثناء جلب البيانات

في كلا المثالين، قمنا باستخدام loading في state لعرض رسالة “Loading…” أثناء تحميل البيانات من الـ API.

6. التعامل مع حالات الخطأ

من المهم التعامل مع الأخطاء أثناء التفاعل مع الـ APIs. في المثالين، استخدمنا catch() في then() و try/catch في async/await لتسجيل الأخطاء في console إذا حدثت مشكلة أثناء جلب البيانات.

7. التعامل مع بيانات أخرى (مثل POST)

في حالة الحاجة لإرسال بيانات إلى API، مثل استخدام طريقة POST، يمكننا استخدام fetch() مع الإعدادات المناسبة.

مثال على استخدام POST لجلب البيانات:

const postData = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        title: 'foo',
        body: 'bar',
        userId: 1,
      }),
    });
    const result = await response.json();
    console.log('Posted data:', result);
  } catch (error) {
    console.error('Error posting data:', error);
  }
};

الشرح:

• قمنا بإرسال طلب POST إلى API باستخدام fetch().
• استخدمنا خاصية method لتحديد نوع الطلب (POST).
• أضفنا headers لتحديد نوع البيانات المرسلة (JSON).
• تم استخدام body لتمرير البيانات التي نريد إرسالها، مع تحويلها إلى JSON باستخدام JSON.stringify().

8. الختام

في هذا الدرس، تعلمنا كيفية:

• جلب البيانات من APIs باستخدام Fetch API.
• التعامل مع Promises باستخدام then() و async/await.
• عرض البيانات المحملة في واجهة المستخدم.
• التعامل مع الأخطاء في حالة حدوثها.
• إرسال بيانات إلى API باستخدام POST.

هذه المهارات أساسية لبناء تطبيقات React تفاعلية تتعامل مع بيانات ديناميكية من الخوادم.