Cara menggunakan Axios di React

Di artikel ini, Anda akan mempelajari cara menggunakan pustaka Axios di React.



Mari pertimbangkan semuanya dengan menggunakan contoh permintaan ke server, menampilkan data yang diterima dalam tabel, meneruskan komponen pemeriksa pemuatan, dan semua ini menggunakan React Hooks.

Apa itu Axios?

Axios adalah salah satu klien HTTP paling populer untuk browser dan node.js.



Axios memiliki dukungan untuk permintaan, menerima tanggapan dari server, mengubahnya, dan secara otomatis mengubahnya menjadi JSON.



Sebelum kita mulai, mari buat proyek React baru:

npx create-react-app react-axios-table

Mari kita bahas:

cd react-axios-table

Data proyek

Kami akan menggunakan array objek sebagai data untuk proyek kami:

[
	{
		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...',
	}
]

Tautan ke data

Mengonfigurasi komponen untuk bekerja dengan Axios

Muat perpustakaan Axios:

npm i axios

Kami mengimpor axios ke dalam komponen tempat kami akan mengirim permintaan ke server:

import axios from 'axios'

Karena dalam proyek kami menggunakan React Hooks, impor useState dan useEffect (baca lebih lanjut tentang hook di react di sini ):

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

Selanjutnya, tambahkan kode berikut ke komponen:

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;

Mari kita lihat lebih dekat kodenya:

const [appState, setAppState] = useState();

Bertanggung jawab atas keadaan negara bagian dalam komponen:

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

useEffect akan memantau perubahan setAppState dan merender ulang jika diperlukan

 const apiUrl=''

kami mengganti tautan kami di sini

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

kirim permintaan get ke server, lalu simpan data JSON yang diterima ke status

Unduh komponen cek

Buat folder komponen di src . Di dalamnya, buat komponen UserData.js dan tambahkan kode berikut:

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

Kami akan mentransfer data yang diterima dari server ke props komponen.

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

periksa apakah ada data dari server

{
                        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>
                        )
                    }

Dengan menggunakan metode peta , kami menelusuri array dengan orang, membuat string untuk setiap orang. Jangan lupakan kuncinya .



Di folder komponen , buat LoadingPersonsData.js dan tempel kode berikut:

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

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

export default LoadingPersonsData

Kode di atas adalah komponen tingkat tinggi di React. Dibutuhkan komponen lain sebagai props dan kemudian mengembalikan beberapa logika. Dalam kasus kami, komponen memeriksa isLoading . Saat data sedang dimuat, kami menampilkan pesan pemuatan, segera setelah isLoading menjadi salah, kami mengembalikan komponen dengan data.



Mari buat perubahan pada App.js kita untuk dapat memeriksa pemuatan data. Mari



impor komponen kita ke App.js :

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

Tambahkan kode berikut:

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);

Kami membuat komponen baru, menyamakannya dengan komponen tingkat tinggi kami dan membungkus UserData (komponen tampilan data) dengannya.



Kami menambahkan pemuatan properti baru : false ke status , yang dengannya kami akan menentukan pemuatan data dari server.

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

Render komponen dan teruskan props ke komponen tingkat tinggi kami.



Mari tambahkan beberapa css dan saat memuat data, kita akan melihat jendela berikut:







Dan sekarang, ketika permintaan get ke server diselesaikan dengan sukses, data diterima:







Sekarang kita tahu bagaimana menggunakan Axios get dengan REST API.



Jika Anda memiliki pertanyaan atau saran, tinggalkan di komentar. Saya akan dengan senang hati menjawabnya.