كيفية استخدام واجهات برمجة التطبيقات Fetch في React

في تطوير الويب الحديث، دمج البيانات من مصادر خارجية هو مطلب شائع. ريأكت، مكتبة جافا سكريبت الشهيرة لبناء واجهات المستخدم، توفر وسيلة بسيطة لجلب البيانات من واجهات برمجة التطبيقات (APIs).

في هذا الدليل، سنستكشف عملية جلب البيانات من واجهة برمجة التطبيقات في ريأكت، مصحوبة بمثال عملي. وما هو أفضل من ذلك، سنقوم بتقديم طريقة بسيطة لتوليد شيفرة عميل Fetch بنقرة واحدة في Apidog.

زر

ما هي واجهة برمجة التطبيقات (API)؟

واجهة برمجة التطبيقات (Application Programming Interface) هي مجموعة من القواعد والبروتوكولات التي تسمح لتطبيقات البرمجيات المختلفة بالتواصل والتفاعل مع بعضها البعض.

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

إنشاء واجهات برمجة التطبيقات في ريأكت باستخدام Fetch API

توفر Fetch API واجهة حديثة لإجراء طلبات HTTP مثل GET و POST من المتصفح. تستخدم الوعود في جافا سكريبت مما يجعل العمل مع الطلبات والاستجابات أسهل. لإجراء طلب، ما عليك سوى استدعاء الدالة fetch()، وتمرير عنوان URL لجلب البيانات منه، ثم التعامل مع الاستجابة عند حلها. وهذا أبسط بكثير من العمل مباشرة مع طلبات XMLHttp.

عند استخدام Fetch مع ريأكت، يمكنك إجراء الطلبات في طرق دورة حياة المكونات مثل useEffect وتحديث حالة المكون عند استلام البيانات. وهذا يتيح لك جلب البيانات من واجهة برمجة التطبيقات وعرضها في واجهة المستخدم الخاصة بك.

تتوافق Fetch API بشكل جيد مع ريأكت لأن كلاهما يستخدم الوعود. يمكنك التعامل مع حالات التحميل والأخطاء لجعل التجربة سلسة للمستخدم. بشكل عام، فإن Fetch المشترك مع ريأكت هو تركيبة قوية جداً لبناء تطبيقات صفحة واحدة معتمدة على البيانات.

كيفية استخدام واجهات Fetch APIs في ريأكت مع مثال تفصيلي

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

إنشاء تطبيق ريأكت

إعداد مشروع ريأكت يتضمن سلسلة من الخطوات. إليك دليل أساسي لمساعدتك على البدء:

1. تثبيت Node.js و npm: قم بتنزيل وتثبيت Node.js و npm من https://nodejs.org/.

2. إنشاء تطبيق ريأكت: افتح سطر الأوامر وشغل npx create-react-app my-react-app. استبدل "my-react-app" باسم المشروع المفضل لديك.

3. بدء خادم التطوير:

انتقل إلى مجلد المشروع الخاص بك باستخدام cd my-react-app.
قم بتشغيل خادم التطوير باستخدام npm start.
سيتم فتح تطبيق ريأكت الخاص بك في http://localhost:3000/ في المتصفح.

هذا كل شيء! لقد قمت بإنشاء تطبيق ريأكت بنجاح في ثلاث خطوات بسيطة. الآن يمكنك التعمق في الشيفرة الخاصة بك، وإجراء التعديلات، ورؤية التغييرات في الوقت الحقيقي أثناء تطوير تطبيقك.

استخدام Fetch API في ريأكت

استخدام Fetch API في ريأكت يتضمن إجراء طلبات HTTP إلى موارد أو واجهات برمجة التطبيقات الخارجية. إليك دليل بسيط حول كيفية استخدام Fetch API في مكون ريأكت:

الخطوة 1: استيراد ريأكت و useState Hook

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

الخطوة 2: إنشاء مكون وظيفي

function MyComponent() {
  // الحالة لتخزين البيانات المسترجعة
  const [data, setData] = useState(null);

  // تأثير لجلب البيانات عند تحميل المكون
  useEffect(() => {
    fetchData();
  }, []); // مصفوفة الاعتماد الفارغة تضمن أن التأثير يعمل مرة واحدة عند التحميل

  // دالة لجلب البيانات
  const fetchData = async () => {
    try {
      // إجراء طلب GET باستخدام Fetch API
      const response = await fetch('https://api.example.com/data');
      
      // تحقق مما إذا كانت الاستجابة ناجحة (رمز الحالة 200-299)
      if (!response.ok) {
        throw new Error('استجابة الشبكة لم تكن جيدة');
      }

      // تحليل البيانات بتنسيق JSON من الاستجابة
      const result = await response.json();

      // تحديث الحالة بالبيانات المسترجعة
      setData(result);
    } catch (error) {
      console.error('خطأ في جلب البيانات:', error.message);
    }
  };

  // عرض المكون
  return (
    <div>
      {data ? (
        // عرض البيانات المسترجعة
        <p>{JSON.stringify(data)}</p>
      ) : (
        // عرض رسالة تحميل أو واجهة أخرى أثناء جلب البيانات
        <p>جاري التحميل...</p>
      )}
    </div>
  );
}

export default MyComponent;

الخطوة 3: استخدام المكون

import React from 'react';
import MyComponent from './MyComponent';

function App() {
  return (
    <div>
      <h1>مثال على Fetch في ريأكت</h1>
      <MyComponent />
    </div>
  );
}

export default App;

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

نستخدم دالة fetch لإجراء طلب GET إلى نقطة النهاية الافتراضية لواجهة برمجة التطبيقات (https://api.example.com/data).
نتعامل مع الاستجابة، ونتحقق مما إذا كانت ناجحة ونحلل البيانات بتنسيق JSON.
يتم تخزين البيانات المسترجعة في حالة المكون باستخدام دالة setData.
يقوم المكون بعرض البيانات المسترجعة أو رسالة تحميل، اعتمادًا على الحالة.

توليد شيفرة العميل بنقرة واحدة باستخدام Apidog

الدمج السلس مع خدمات الخلفية هو حجر الزاوية في تطوير الواجهة الأمامية، وغالبًا ما يتحقق من خلال واجهة Fetch API. تسهل هذه الواجهة إجراء طلبات HTTP بشكل مباشر من المتصفح، مما يمنح تطبيقات ريأكت القدرة على استرداد البيانات بكفاءة من الخلفيات أو واجهات برمجة التطبيقات الخارجية.

بالنسبة للمطورين الذين قد يجدون برمجة طلبات واجهة برمجة التطبيقات بالتفصيل داخل ريأكت مرهقًا، توفر أدوات توليد شيفرة العميل بنقرة واحدة مثل Apidog وقتًا ثمينًا. إليك مثال على واجهة برمجة تطبيقات محل الحيوانات الأليفة POST.

انقر على الأيقونة لتوليد شيفرة العميل كما يلي:

إليك نتيجة بيانات Fetch.

تبسط Apidog هذه العملية من خلال تحويل مواصفات واجهة برمجة التطبيقات الخلفية إلى شيفرة جاهزة للعمل للجانب العميل، مما يتطابق بدقة مع بنى البيانات ونقاط النهاية المطلوبة ويتجاوز التعقيدات والأخطاء المرتبطة بالبرمجة اليدوية.

دمج شيفرة العميل المولدة في تطبيق ريأكت

يمكن دمج الشيفرة المولدة للعميل في تطبيق ريأكت من خلال اتباع الخطوات العامة التالية:

استيراد الملفات المولدة إلى تطبيق ريأكت: انسخ الملفات المولدة (أو المجلد بالكامل) إلى مشروع ريأكت الخاص بك. تأكد من توافق هذه الملفات مع هيكل مشروعك.

2. استيراد واستخدام دوال طلب واجهة برمجة التطبيقات المولدة: في مكون ريأكت الخاص بك أو في مكان آخر مناسب، استورد دوال طلب واجهة برمجة التطبيقات المولدة واستخدمها. على سبيل المثال:

import { createPet, getPetById } from './path/to/generated/api';

// استخدم في مكون أو في مكان آخر
async function fetchData() {
  try {
    const newPet = await createPet({ name: 'Fido', age: 2 });
    const petDetails = await getPetById(newPet.id);
    console.log(petDetails);
  } catch (error) {
    console.error('خطأ في جلب البيانات:', error.message);
  }
}

3. التعامل مع البيانات: قم بمعالجة البيانات المعادة من طلبات واجهة برمجة التطبيقات، مع احتمالية تحديث حالة المكون، ورسم واجهة المستخدم، وما إلى ذلك.

نصيحة إضافية من Apidog:

تتمثل ميزة استخدام Apidog في خاصية المحاكاة الخاصة بها، مما يسمح للمطورين بمحاكاة الاستجابات الخلفية، وهي قدرة حاسمة خلال مراحل التطوير المبكرة أو عندما لا تكون واجهات برمجة التطبيقات الخلفية جاهزة بعد.

تضمن هذه البيانات الوهمية بقاء تطوير الواجهة الأمامية ضمن الجدول الزمني، مما يسمح بالعمل على واجهة المستخدم وتجربة المستخدم والمنطق العام للتطبيق دون الاعتماد على جاهزية الخلفية.

زر