Cara Fetching data dari API di React

Fetching data dari API di React adalah salah satu tugas yang paling umum dalam pengembangan aplikasi web. Anda dapat menggunakan fetch, axios, atau pustaka lainnya untuk melakukan permintaan HTTP dan mengambil data dari API. Di bawah ini adalah langkah-langkah dan contoh menggunakan fetch untuk mengambil data dari API di React.

Langkah-langkah Fetching Data di React

1. Buat Proyek React Baru (Opsional)

   Jika Anda belum memiliki proyek React, Anda bisa membuatnya menggunakan Create React App:

   npx create-react-app my-app
   cd my-app

2. Fetching Data Menggunakan fetch API

   fetch adalah API bawaan di JavaScript yang memungkinkan Anda melakukan permintaan HTTP. Di React, Anda biasanya melakukan fetching data di lifecycle method seperti componentDidMount (untuk class components) atau menggunakan useEffect hook (untuk functional components).

   Contoh Menggunakan Functional Component dengan useEffect:

   File src/App.js:

   import React, { useState, useEffect } from 'react';
   
   function App() {
     const [data, setData] = useState([]);
     const [loading, setLoading] = useState(true);
   
     useEffect(() => {
       // Fetch data from API
       fetch('https://jsonplaceholder.typicode.com/posts')
         .then(response => response.json())
         .then(data => {
           setData(data);
           setLoading(false);
         })
         .catch(error => {
           console.error("Error fetching data: ", error);
           setLoading(false);
         });
     }, []);
   
     if (loading) {
       return <p>Loading...</p>;
     }
   
     return (
       <div className="container">
         <h1>Data Fetching Example</h1>
         <ul>
           {data.map(post => (
             <li key={post.id}>
               <h2>{post.title}</h2>
               <p>{post.body}</p>
             </li>
           ))}
         </ul>
       </div>
     );
   }
   
   export default App;

3. Penjelasan Kode:

   • useState: Menggunakan state hooks untuk menyimpan data yang di-fetch dan status loading.

   • useEffect: Hook ini digunakan untuk melakukan side-effects dalam komponen, seperti fetching data. useEffect dengan array kosong [] sebagai argumen kedua hanya akan dijalankan sekali setelah komponen pertama kali dirender, mirip dengan componentDidMount pada class components.

   • fetch: Digunakan untuk mengambil data dari API. Dalam contoh ini, data diambil dari API publik di jsonplaceholder.typicode.com.

   • Loading State: Selama proses fetching data, status loading disetel ke true dan ditampilkan pesan loading. Setelah data berhasil diambil, status loading disetel ke false.

   • Render Data: Setelah data berhasil di-fetch, kita merender daftar data menggunakan metode .map().

4. Handling Errors:

   Dalam contoh di atas, jika ada kesalahan saat fetching data (misalnya, masalah jaringan atau API tidak merespons), kesalahan tersebut akan ditangani oleh catch dan pesan kesalahan akan dicetak di konsol.

Fetching Data Menggunakan axios (Alternatif)

Sebagai alternatif, Anda dapat menggunakan axios, pustaka populer untuk permintaan HTTP yang menyediakan sintaksis yang lebih bersih dan dukungan untuk berbagai fitur tambahan seperti interceptors, handling response timeout, dll.

Instalasi axios:

npm install axios

Contoh Menggunakan axios dalam useEffect:

File src/App.js:

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

function App() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/posts')
      .then(response => {
        setData(response.data);
        setLoading(false);
      })
      .catch(error => {
        console.error("Error fetching data: ", error);
        setLoading(false);
      });
  }, []);

  if (loading) {
    return <p>Loading...</p>;
  }

  return (
    <div className="container">
      <h1>Data Fetching Example with Axios</h1>
      <ul>
        {data.map(post => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Sumber

• React Documentation - Hooks

• Fetch API - MDN Documentation

• Axios Documentation

Dengan langkah-langkah di atas, Anda dapat mengambil data dari API dan menggunakannya dalam aplikasi React Anda.