Panduan Mengambil dan Menampilkan Data dari API di React JS

Diterbitkan: 2024-10-01

Mengambil dan menampilkan data dari API adalah tugas mendasar dalam aplikasi React modern. Dengan evolusi React, pengambilan data menjadi lebih efisien dan menawarkan banyak metode untuk membuat permintaan HTTP. Dalam panduan ini, kami akan membahas langkah-langkah mengambil dan menampilkan data menggunakan React.

Daftar isi

Beralih

Menyiapkan Proyek React

Sebelum mendalami pengambilan API, pastikan Anda telah menyiapkan proyek React. Anda dapat membuatnya menggunakan

  • npx create-react-app my-app
    cd my-app
    npm start

Ini menginisialisasi proyek React baru dan menjalankan server pengembangan.

️ Langkah demi Langkah: Mengambil Data di React

1. Buat Status untuk Menyimpan Data

Gunakan hook useState untuk membuat variabel status guna menyimpan data yang diambil.

javascript

  • const [data, setData] = useState([]);

2. Ambil Data API dengan useEffect

Hook useEffect React memastikan bahwa pengambilan data terjadi ketika komponen dipasang. Fungsi fetch() digunakan untuk mengambil data dari API.

javascript

  • useEffect(() => {
    fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => setData(data))
    .catch(error => console.error('Error:', error));
    }, []);

3. Menampilkan Data yang Diambil

Setelah data diambil, data dapat dirender di BEJ menggunakan metode map() :

  • return (
    <div>
    <ul>
    {data.map(item => (
    <li key={item.id}>{item.name}</li>
    ))}
    </ul>
    </div>
    );

️ Menggunakan Axios untuk Mengambil Data

Meskipun fetch() adalah API browser asli, banyak pengembang lebih suka menggunakan perpustakaan seperti Axios karena kesederhanaan dan fitur canggihnya. Berikut ini contoh penggunaan Axios:

Instal Aksio :

  • npm install axios

Mengambil Data

  • useEffect(() => {
    axios.get('https://api.example.com/data')
    .then(response => setData(response.data))
    .catch(error => console.error('Error:', error));
    }, []);

‍ Menangani Kasus Tepi

  • Status Pemuatan : Penting untuk mengelola status pemuatan saat data diambil.
  • Penanganan Kesalahan : Menerapkan penanganan kesalahan yang tepat dapat meningkatkan pengalaman pengguna.

Contoh:

const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
setData(data);
setLoading(false);
})
.catch(error => {
setError(error);
setLoading(false);
});
}, []);

Kesimpulan

Mengambil dan menampilkan data dari API di React sangat penting untuk membuat aplikasi web dinamis. Baik menggunakan API fetch() atau pustaka seperti Axios, prosesnya melibatkan penentuan status untuk menyimpan data, membuat permintaan, dan merender hasilnya. Dengan memahami langkah-langkah ini dan menangani kasus-kasus ekstrem seperti pemuatan dan kesalahan, Anda dapat membuat aplikasi responsif berbasis data secara efisien.

Pertanyaan yang Sering Diajukan

1. Bagaimana cara menyiapkan proyek React untuk mulai mengambil data API?

Untuk menyiapkan proyek React, jalankan perintah berikut:

npx create-react-app my -app
cd my -app
npm start

Ini menginisialisasi proyek dan memulai server pengembangan.

2. Bagaimana cara menyimpan data yang diambil di React?

Anda dapat menyimpan data yang diambil menggunakan kait useState . Contoh:

const [data, setData] = useState ([]);

3. Bagaimana cara mengambil data di React saat komponen dipasang?

Gunakan kait useEffect untuk mengambil data saat komponen dipasang:

useEffect ( () => {
fetch ( 'https://api.example.com/data' )
. then ( response => response. json ())
. then ( data => setData (data))
. catch ( error => console . error ( 'Error:' , error));
}, []);

4. Apa tujuan penggunaan metode map() di React saat merender data?

Metode map() digunakan untuk mengulang array data yang diambil dan merender setiap item di BEJ. Misalnya:

<ul>
{data. map ( item => (
< li key = {item.id} > {item.name} </ li >
))}
</ul>

5. Mengapa saya menggunakan Axios dan bukan API pengambilan?

Banyak pengembang lebih memilih Axios karena menyederhanakan permintaan HTTP, menawarkan lebih banyak fitur, dan mendukung browser lama dengan lebih konsisten.

6. Bagaimana cara menginstal Axios di proyek React saya?

Untuk menginstal Axios, jalankan:

npm install axios

7. Bagaimana cara mengambil data menggunakan Axios di React?

Dengan Axios, Anda dapat mengambil data seperti ini:

useEffect ( () => {
axios. get ( 'https://api.example.com/data' )
. then ( response => setData (response. data ))
. catch ( error => console . error ( 'Error:' , error));
}, []);

8. Bagaimana cara menangani status pemuatan saat mengambil data di React?

Anda dapat mengelola status pemuatan dengan membuat variabel loading dengan useState . Misalnya:

const [loading, setLoading] = useState ( true );

efek penggunaan ( () => {
ambil ( 'https://api.example.com/data' )
. lalu ( respon => respon.json ())
. lalu ( data => {
setData (data);
setLoading ( salah );
});
}, []);

9. Bagaimana cara menangani kesalahan saat mengambil data?

Untuk menangani kesalahan, tentukan status error dan perbarui jika permintaan gagal:

const [error, setError] = useState ( null );

efek penggunaan ( () => {
ambil ( 'https://api.example.com/data' )
. menangkap ( kesalahan => {
setError (kesalahan);
setLoading ( salah );
});
}, []);

10. Mengapa penting untuk menangani kasus-kasus edge seperti pemuatan dan kesalahan dalam pengambilan API?

Menangani kasus-kasus edge seperti pemuatan dan kesalahan memastikan bahwa pengguna mendapat informasi tentang status pengambilan data saat ini dan memberikan pengalaman pengguna yang lebih lancar jika pengambilan data gagal atau memerlukan waktu.