كيفية جلب بيانات API في React

عند تطوير التطبيقات، غالبًا ما تحتاج إلى الحصول على البيانات من واجهة برمجة التطبيقات (API). يتيح لك ذلك تقديم محتوى ديناميكي يتم تحديثه بشكل متكرر داخل التطبيق الخاص بك.

ستحتاج إلى استرداد هذه البيانات حيث قد تحتاج إلى التفاعل مع خدمات خارجية أو التواصل مع خادم بعيد أو الوصول إلى قاعدة بيانات.

سأعرض لك في هذه المقالة طرقًا مختلفة لجلب البيانات باستخدام React كمثال.

محتوى المقال

المتطلبات الأساسية

قم بتثبيت Node.js
تأكد من أن لديك على الأقل فهمًا أساسيًا لـ React.js .
محرر النصوص

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

API تعني واجهة برمجة التطبيقات. فهو يتيح تبادل المعلومات والوظائف بين الأنظمة المختلفة، مثل موقع الويب والخادم أو بين تطبيقات البرامج المختلفة.

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

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

لماذا تعتبر واجهات برمجة التطبيقات مهمة في تطوير الويب؟

هناك عدة أسباب تجعل واجهات برمجة التطبيقات مهمة في تطوير الويب. دعنا نتناول بعضًا منها أدناه:

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

ما هو طلب بروتوكول نقل النص التشعبي (HTTP)؟

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

إن استخدام واجهات برمجة التطبيقات (APIs) في تطوير البرمجيات يجعل الأمور أكثر مرونة وكفاءة. كما أنه يعزز الأمان ويمكّن أنظمة البرامج المختلفة من العمل معًا بشكل جيد.

أنواع طلبات HTTP

نحن نستخدم طرق طلب مختلفة HTTP، مثل getو postو putو و deleteللحصول على البيانات وتخزينها في قاعدة البيانات الخاصة بنا. لكن الطلبات الأكثر شيوعًا هي الطلبات getوالطلبات post.

دعونا نناقش معنى HTTPطرق الطلب هذه:

GET: تقوم هذه الطريقة باسترداد البيانات من نقطة نهاية محددة. فكر في الأمر على أنه طلب معلومات.
POST: ترسل هذه الطريقة البيانات إلى نقطة نهاية محددة. على سبيل المثال، يمكنك إرسال رسالة أو إرسال نموذج. سيتم إضافة المعلومات إلى قاعدة البيانات.
PUT: يتم استخدام هذه الطريقة لتحديث قيمة السجل أو البيانات عند نقطة نهاية معينة. أنت تقوم بإجراء تغييرات على المعلومات الموجودة.
الحذف: تقوم هذه الطريقة بمسح البيانات من نقطة نهاية محددة. إنه مثل التخلص من الأشياء غير الضرورية.

إحدى الطرق المعتمدة على نطاق واسع للتحقق من واجهات برمجة التطبيقات هي من خلال المتصفح.

لمعرفة المزيد من الطرق للحصول على البيانات، راجع هذه المقالة: بدء استخدام واجهات برمجة التطبيقات (APIs) .

كيفية جلب البيانات في رد الفعل

هناك طرق مختلفة لجلب البيانات في React. قبل أن نبدأ، لنبدأ بكتابة بعض التعليمات البرمجية النموذجية لـ React أو بإنشاء قالب في محررنا.

إليك الأمر للقيام بذلك:

npx create-react-app ./ or npx create-vite@latest ./

بعد ذلك اكتب الأمر التالي:

npm run dev

سيؤدي هذا إلى بدء تشغيل خادم التطوير.

في الصورة أعلاه، ستلاحظ أنني أضفت نقطة (.) مباشرة بعد الأمر.

يعد هذا اختصارًا مناسبًا لإنشاء القالب داخل الدليل الحالي.

طرق مختلفة لجلب البيانات في React

1. استخدم طريقة “لا معنى لها أثناء إعادة التحقق” (SWR).

تُستخدم هذه الطريقة لجلب البيانات من الخادم وتُستخدم في React. فهو يدير أي مشكلات قد تنشأ عند الحصول على البيانات ويساعدك على إدارة تخزينها. SWRيتضمن useState()و useEffect()، لذلك ليست هناك حاجة لاستيرادها.

مزايا SWR

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

كيفية استخدامها `SWR`للحصول على البيانات

في التطبيق الخاص بك، قم بإنشاء ملف .
ثم قم بتثبيت الحزمة SWR في التطبيق الخاص بك باستخدام الأمر التالي:

npm i swr

Import useSWR، وهو خطاف يحتوي على كليهما useState()و useEffect()، في تطبيقك.
ثم حدد متغيرًا ثابتًا في الأعلى يسمى fetcher وقم بتعيين وظيفة له.

هذه الوظيفة قادرة على استقبال أي عدد من الوسائط، التي يشير إليها ...args بناء الجملة.

تبدو الوظيفة كما يلي:
const fetcher = (...args) => fetch(...args).then(res => res.json())

هنا هو كيف Swr.jsxينبغي أن تبدو بعد ذلك:

import useSWR from 'swr';

// Import useSWR from swr package

// created function to handle API request
const fetcher = (...args) => fetch(...args).then((res) => res.json());

const Swr = () => {
  const {
    data: countries,
    error,
    isValidating,
  } = useSWR('https://restcountries.com/v2/all', fetcher);

  // Handles error and loading state
  if (error) return <div className='failed'>failed to load</div>;
  if (isValidating) return <div className="Loading">Loading...</div>;

  return (
    <div>
      {countries &&
        countries.map((country, index) => (
          <img key={index} src={country.flags.png} alt='flag' width={100} />
        ))}
    </div>
  );
};

export default Swr;

باستخدام سور

دعونا نرى ما يحدث في الكود أعلاه:

أول شيء فعلناه هو استيراد SWRالمكتبة.
بعد ذلك، قمنا بتحديد وظيفة للتعامل مع طلب واجهة برمجة التطبيقات (API).
وفي المقابل، استخدمنا map()طريقة التكرار عبر قائمة الدول.
لقد وضعنا &&خطًا للتأكد من أنه إذا لم تكن هناك مشكلات وتم استلام البيانات بشكل صحيح (بمعنى أن المتغير countriesليس فارغًا أو غير محدد)، فسيتم المضي قدمًا في تعيين البيانات وإظهار عنصر imageلكل دولة.
أخيرًا، قمنا بتصدير المكون إلى جذر التطبيق App.jsxأو Index.jsxحتى يمكن عرضه في المتصفح.

وهذه هي النتيجة:

2. استخدم `Fetch()`طريقة جافا سكريبت

هذه fetch()الطريقة معروفة جيدًا لاسترداد البيانات من واجهات برمجة التطبيقات. ومن المسلم به أنه النهج الأبسط والأكثر استخدامًا.

مزايا استخدام `fetch()`الطريقة

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

كيفية استخدامها `fetch()`للحصول على البيانات

في التطبيق الخاص بك، قم بإنشاء ملف .
ثم قم بالاستيراد useState()لإدارة الحالة في React.
بعد ذلك، قم بالاستيراد useEffect()، لأنه سيؤدي إلى عرض البيانات من واجهة برمجة التطبيقات (API).

هنا كيف Fetch.jsxينبغي أن تبدو:


import { useState, useEffect } from 'react';
const Fetch = () => {
  const [photos, setPhotos] = useState([]);
  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/photos')
      .then((res) => {
        return res.json();
      })
      .then((data) => {
        console.log(data);
        setPhotos(data);
      });
  }, []);
  return (
    <div>
      
      {photos.map((photo) => (
        <img key={photo.id} src={photo.url} alt={photo.title} width={100} />
      ))}
    </div>
  );
};
export default Fetch;

باستخدام الجلب ()

في الداخل useEffect()، نقوم بجلب بياناتنا عن طريق إرسال طلب باستخدام مفتاح API. تعود الاستجابة بتنسيق JSON (ترميز كائن JavaScript).

في بيان الإرجاع، نقوم بمعالجة الصور المستلمة باستخدام وظيفة map() للتكرار خلال كل عنصر.

في السيناريو الخاص بنا، نحن مهتمون فقط بالصور. نقوم بعرضها في المتصفح من خلال عرضها في الملف الرئيسي للتطبيق، أو الجذر. يمكن أن يكون الملف الرئيسي App.jsxأو Index.js.

هنا كيف App.jsxيبدو الملف:

وهذه هي النتيجة:

3. استخدم `React Query`المكتبة

React Query، المعروف أيضًا باسم TanStack Query، مفيد لإدارة البيانات في تطبيقات React. الفرق بين الاسمين هو الإصدار.

يعد استخدام React Query أمرًا سهلاً ويجعل التعامل مع البيانات في تطبيقك يبدو تلقائيًا تقريبًا، كما لو أنه يعتني بالأشياء نيابةً عنك. على سبيل المثال، جلب حالات الخادم وتخزينها مؤقتًا ومزامنتها وتحديثها في تطبيقاتك.

مزايا `React Query`الطريقة

يتم تخزين البيانات التي تم استردادها من واجهات برمجة التطبيقات مؤقتًا بواسطة React Query. يمكنك استرداد نفس البيانات من ذاكرة التخزين المؤقت مرة أخرى. وهذا يوفر الوقت عن طريق تجنب طلب شبكة جديد.
يمكن للبرنامج إعادة جلب البيانات تلقائيًا عند استيفاء شروط معينة. وتشمل هذه الشروط استعادة التركيز أو مرور وقت محدد.
React Queryيحتوي على تحديثات متفائلة يمكنها تحديث واجهة المستخدم. يُظهر النتيجة المتوقعة للطفرة دون تأكيد الخادم. ونتيجة لذلك، يتم تحقيق تجربة مستخدم أكثر سلاسة.
لقد تم تصميمه للعمل مع React، مع الاستفادة من بنيته القائمة على المكونات لتمكين التكامل السلس.
React Queryيتضمن DevTools التي تقدم رؤى حول حالة الاستعلام والتحول والتخزين المؤقت. تساعد هذه الأدوات في تصحيح الأخطاء وتحسين الأداء.

كيفية استخدامها `React Query`للحصول على البيانات

للبدء، استخدم هذا الأمر لتثبيت مكتبة React-Query (TanStack Query) في تطبيقك:

npm i @tanstack/react-query

لتفعيل الأمور، استخدم QueryClientProviderمن @tanstack/react-query.

لف التطبيق الخاص بك، وهو Main.jsxالمكون، به وقم بتمريره queryClientكدعم. يأتي تلقائيًا من ملف QueryClient.

إليك كيف Main.jsxيجب أن يبدو الملف:

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </React.StrictMode>
)

التفاف الجذر للتطبيق الخاص بك

والآن بعد أن قمنا بذلك، يمكننا جلب البيانات:

في التطبيق الخاص بك، قم بإنشاء ملف .
قم باستيراد الخطاف من @tanstack/react-queryأعلى ملفك:

import { useQuery } from '@tanstack/react-query';

يتم useQuery hookتعريفه بمعلمتين حاسمتين في شكل الكائن. هذه المعلمات هي queryFnو queryKey.
queryFnيعالج جلب البيانات من نقطة النهاية.
queryKeyبمثابة المعرف الفريد للبيانات التي تم الحصول عليها.

كما ذكرنا سابقًا، React Queryفهو يبسط ويدير حالات التحميل والأخطاء. لا تحتاج إلى منفصلة useState() hook.

import { useQuery } from '@tanstack/react-query';
const Query = () => {
  const { data: comments, isLoading, error } = useQuery({
    queryFn: () =>
      fetch('https://jsonplaceholder.typicode.com/comments?_limit=10').then(
        (res) => res.json()
      ),
    queryKey: ['comments'],
  });
  
  // Show a loading message while data is fetching
  if (isLoading) {
    return <h2>Loading...</h2>;
  }
  
  // to handle error
  if (error) {
    return <div className="error">Error: error fetching</div>
  }
  
  return (
    <div>
      <h1 className='title'>Email address of users</h1>
      {comments.map((comment) => (
        <h2 key={comment.id} className="users">
          {comment.id}.  
            {comment.email}
        </h2>
      ))}
    </div>
  );
};
export default Query;

الكود (Query.jsxfile)

وهذه هي النتيجة:

كما ذكرنا سابقًا، useQuery()يدير حالات التحميل والخطأ طالما تم تحديدها.

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

هنا مثال:

4. استخدم `Axios`المكتبة

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

مميزات `Axios`المكتبة

أكسيوس بسيط وسهل الفهم. إنها طريقة واضحة ومباشرة للحصول على البيانات من واجهة برمجة التطبيقات (API).
لقد تم تصميمه للعمل بشكل جيد في معظم متصفحات الويب الأحدث.
ليس عليك إضافة أي شيء إضافي إلى التعليمات البرمجية الخاصة بك لاستخدام Axios. إنه جاهز للاستخدام كجزء من JavaScript.

كيفية استخدام مكتبة أكسيوس للحصول على البيانات

في التطبيق الخاص بك، قم بإنشاء ملف .
قم بتثبيت الحزمة Axiosفي التطبيق الخاص بك مثل هذا:

npm i axios

أوامر لتثبيت الحزمة

مكتبة الاستيراد Axiosفي التطبيق الخاص بك.
Import useState()، الذي يتيح إدارة الحالة في React.
ثم قم بالاستيراد useEffect()مما يسهل عرض البيانات من واجهة برمجة التطبيقات.

إليك الشكل الذي Axios.jsxيجب أن يبدو عليه الملف:

import { useEffect, useState } from 'react'
import axios from 'axios'
const Axios = () => {
  const [meals, setMeals] = useState([])
  useEffect(() => {
    axios.get('https://www.themealdb.com/api/json/v1/1/random.php')
      .then((res) => {
        setMeals(res.data.meals);
      })
  }, [])
  
  return (
    <div>
      {meals.map((meal) => (
      <img key={meal.idMeal} src={meal.strMealThumb} alt={meal.strMeal} width={400}/>
      ))}
    </div>

شفرة

في الداخل useEffect()نقوم بجلب بياناتنا عن طريق إرسال طلب باستخدام مفتاح API. تعود الاستجابة بتنسيق JSON (ترميز كائن JavaScript).

نستخدم map()دالة في بيان الإرجاع. map()تساعدنا الوظيفة على معالجة الوجبات . ويتكرر من خلال كل قطعة من المعلومات.

في السيناريو الخاص بنا، نحن مهتمون فقط بصور كل وجبة.

لعرضها في المتصفح، نقوم بعرضها في جذر التطبيق، والذي يمكن أن يكون App.jsxأو Index.js.

وهذه هي النتيجة:

5. استخدم `useFetch`الخطاف المخصص من خطاف التفاعل

الخطاف المخصص في React هو إحدى وظائف JavaScript. إنه قابل لإعادة الاستخدام ويستفيد من خطافات React المضمنة. والغرض من ذلك هو تغليف المنطق ومشاركته عبر مكونات متعددة. وهذا يعزز نمطية التعليمات البرمجية وقابلية الصيانة.

يسمح لنا الخطاف المخصص بإعادة استخدام منطق الجلب في المكونات المختلفة لتطبيقنا.

في React، غالبًا ما تتم تسمية الخطافات المخصصة باستخدام اصطلاح، مثل useFetch. عادةً ما يتبع أي ربط مخصص نمط تسمية يبدأ بالكلمة الأساسية use.

مزايا الخطاف المخصص

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

كيفية الحصول على البيانات باستخدام ربط مخصص

افتح المحطة في التطبيق الخاص بك.
اكتب هذا الأمر لتثبيت الحزمة المطلوبة.

npm install react-fetch-hook

يأمر

بمجرد اكتمال التثبيت، انتقل إلى بداية ملف التطبيق الخاص بك. أضف السطر التالي لاستيراد useFetch hook:

import useFetch from "react-fetch-hook";

الآن، يمكنك استخدام useFetchالخطاف للتفاعل مع واجهة برمجة التطبيقات (API).

قم بإنشاء متغيرات لتتبع الأخطاء وحالات التحميل والبيانات باستخدام التدمير.
في تطبيقك، قم بإجراء استدعاءات API باستخدام ملحق useFetch hook. تحديث المتغيرات.

مثال الكود:

import useFetch from "react-fetch-hook";

const UseFetch = () => {
  const { data: posts, isLoading, error } = useFetch('https://jsonplaceholder.typicode.com/posts');

  // Show a loading message while data is fetching
  if (isLoading) {
    return <h2>Loading...</h2>;
  }

  // Handle error
  if (error) {
    return <div className="error">Error: error fetching</div>;
  }

  return (
    <div>
      <h1 className='title'>Post of users</h1>
      {posts.map((post) => (
        <div key={post.id} className="card">
          <h2 className='users'>{post.title}</h2>
          <p>{post.body}</p>
        </div>
      ))}
    </div>
  );
};

وهذه هي النتيجة:

البيانات التي يتم استدعاؤها باستخدام الخطاف المخصص

خاتمة

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

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

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

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

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

نسعى دائما لتقديم كل ماهو ممتع لكم فاتمنى ان نكون عند حسن ظنكم جميعا.

فارجو دعمنا وتشجيعنا على تقديم الافضل بمشاركة الموضوع مع اصدقائكم على مواقع التواصل الاجتماعى فيس بوك و تويتر عن طريق ازرار المشاركة اسفل التدوينة.

وترك تعليق داخل صندوق التعليقات تشجيعاُ لنا كل الود والاحترام لكم والى اللقاء فى تدوينة اخرى من تدوينات مدونة الشهادة .