كيفية استخدام Axios في React

في هذه المقالة ، ستتعلم كيفية استخدام مكتبة Axios في React.



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

ما هو أكسيوس؟

يعد Axios أحد أكثر عملاء HTTP شيوعًا للمتصفحات و node.js.



يحتوي Axios على دعم للطلبات ، وتلقي الردود من الخادم ، وتحويلها ، وتحويلها تلقائيًا إلى JSON.



قبل أن نبدأ ، لنقم بإنشاء مشروع React جديد:

npx create-react-app react-axios-table

دعنا ندخلها:

cd react-axios-table

بيانات المشروع

سنستخدم مجموعة من الكائنات كبيانات لمشروعنا:

[
	{
		id: 101,
		firstName: 'Sue',
		lastName: 'Corson',
		email: 'DWhalley@in.gov',
		phone: '(612)211-6296',
		address: {
			streetAddress: '9792 Mattis Ct',
			city: 'Waukesha',
			state: 'WI',
			zip: '22178'
		},
		description: 'et lacus magna dolor...',
	}
]

ارتباط بالبيانات

تكوين مكون للعمل مع Axios

قم بتحميل مكتبة Axios:

npm i axios

نقوم باستيراد axios إلى المكون الذي سنرسل منه الطلبات إلى الخادم:

import axios from 'axios'

لان في المشروع ، نستخدم React Hooks ، ونستورد useState و useEffect (اقرأ المزيد عن الخطافات في التفاعل هنا ):

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

بعد ذلك ، أضف الكود التالي إلى المكون:

function App() {
  
  const [appState, setAppState] = useState();
  
  useEffect(() => {
    const apiUrl = 'http://www.filltext.com/?rows=32&id={number|1000}&firstName={firstName}&lastName={lastName}&email={email}&phone={phone|(xxx)xxx-xx-xx}&address={addressObject}&description={lorem|32}';
    axios.get(apiUrl).then((resp) => {
      const allPersons = resp.data;
      setAppState(allPersons);
    });
  }, [setAppState]);

 
  return (
    <div className="app">
    
    </div>
  );
}

export default App;

دعنا نلقي نظرة فاحصة على الكود:

const [appState, setAppState] = useState();

المسئول عن حالة الدولة في المكون:

 useEffect(() => {}, [setAppState])

سيراقب useEffect تغييرات setAppState ويعيد التصيير إذا لزم الأمر

 const apiUrl=''

نستبدل الرابط الخاص بنا هنا

axios.get(apiUrl).then((resp) => {
      const allPersons = resp.data;
      setAppState(allPersons);
    });

أرسل طلب الحصول على الخادم ، ثم احفظ بيانات JSON المستلمة في الحالة

تحميل مكون الاختيار

قم بإنشاء مجلد مكونات في src . في ذلك ، أنشئ مكون UserData.js وأضف الكود التالي:

function UserData(props) {

    const { persons } = props

    if (!persons || persons.length === 0) return <p> .</p>

    return (
        <div>
            <table>
                <thead>
                    <tr>
                        <th>id</th>
                        <th>firstName</th>
                        <th>lastName</th>
                        <th>email</th>
                        <th>phone</th>
                    </tr>
                </thead>
                <tbody>
                    {
                        persons.map((person) =>
                            <tr key={person.id}>
                                <td>{person.id}</td>
                                <td>{person.firstName}</td>
                                <td>{person.lastName}</td>
                                <td>{person.email}</td>
                                <td>{person.phone}</td>
                            </tr>
                        )
                    }
                </tbody>
            </table>
      </div>
    )
}

export default UserData

سننقل البيانات المستلمة من الخادم إلى عناصر المكون.

 if (!persons || persons.length === 0) return <p> .</p>

تحقق مما إذا كانت هناك بيانات من الخادم

{
                        persons.map((person) =>
                            <tr key={person.id}>
                                <td>{person.id}</td>
                                <td>{person.firstName}</td>
                                <td>{person.lastName}</td>
                                <td>{person.email}</td>
                                <td>{person.phone}</td>
                            </tr>
                        )
                    }

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



في مجلد المكونات ، أنشئ LoadingPersonsData.js والصق الكود التالي:

function OnLoadingUserData(Component) {
    return function LoadingPersonsData({ isLoading, ...props }) {
        if (!isLoading) return <Component {...props} />

        else return (
            <div>
                <h1>,  !</h1>
            </div>
        )
    }
}

export default LoadingPersonsData

الكود أعلاه هو مكون ذو ترتيب أعلى في React. يأخذ مكونًا آخر كدعامات ثم يعيد بعض المنطق. في حالتنا ، يتحقق المكون هو التحميل . في حين أن البيانات تحميل، نعرض الرسالة تحميل، في أقرب وقت isLoading غير كاذبة، نعود المكون مع البيانات.



دعونا نجري تغييرات على App.js لدينا حتى نتمكن من التحقق من تحميل البيانات. دعنا



نستورد مكوناتنا إلى App.js :

import UserData from './components/UserData'
import OnLoadingUserData from './components/OnLoadingUserData'

أضف الكود التالي:

function App() {

  const DataLoading =  LoadingPersonsData(UserData);

  const [appState, setAppState] = useState(
    {
      loading: false,
      persons: null,
    }
  )

 useEffect(() => {
    setAppState({loading: true})
    const apiUrl = 'http://www.filltext.com/?rows=32&id={number|1000}&firstName={firstName}&lastName={lastName}&email={email}&phone={phone|(xxx)xxx-xx-xx}&address={addressObject}&description={lorem|32}';
    axios.get(apiUrl).then((resp) => {
      const allPersons = resp.data;
      setAppState({
      loading: false,
      persons: allPersons
       });
    });
  }, [setAppState]);


  return (
    <div className="app">
        <DataLoading isLoading={appState.loading} persons={appState.persons} />
    </div>
  );
}

export default App;

 const DataLoading =  LoadingPersonsData(UserData);

ننشئ مكونًا جديدًا ، ونساويه بمكوننا ذي الترتيب الأعلى ونلفه به UserData (مكون عرض البيانات).



نضيف تحميل خاصية جديد : خطأ في الحالة ، والذي من خلاله سنحدد تحميل البيانات من الخادم.

<DataLoading isLoading={appState.loading} persons={appState.persons} />

قم بتصدير المكون ومرر الدعائم إلى مكون الترتيب الأعلى لدينا.



دعنا نضيف بعض css وعند تحميل البيانات ، سنرى النافذة التالية:







والآن ، عند اكتمال طلب الحصول على الخادم بنجاح ، يتم استلام البيانات:







الآن نحن نعرف كيفية استخدام Axios get مع REST API.



إذا كان لديك أي أسئلة أو اقتراحات ، فاتركها في التعليقات. سأكون سعيدا للإجابة.