data fetching artikel 7 dari 16 ambil

📡 Data Fetching · Artikel 7 dari 16

Ambil Data dari Internet:
Praktikum Fetch API & Axios
di React

Sudah bisa bikin komponen React yang keren? Sekarang saatnya aplikasi kamu hidup — dengan mengambil data nyata dari API internet menggunakan Fetch API dan Axios.

⏱️

Estimasi Baca

12 Menit

🎯

Level

Pemula → Menengah

📅

Tahun

2026

🔥

Praktikum

3 Proyek Mini

#FetchAPI #Axios #BelajarReact #ZeroToZorro #ReactTutorial

Pernah nggak kamu buka aplikasi cuaca, terus lihat data suhu kota kamu muncul secara real-time? Atau buka toko online dan produk langsung nongol dari database? Itu semua berkat satu mekanisme ajaib: data fetching. Dan di dunia React, dua jagoan yang paling sering dipakai untuk melakukan ini adalah Fetch API dan Axios — topik utama artikel fetch API Axios React tutorial kali ini.

Kalau artikel sebelumnya kamu udah kenalan sama useEffect, sekarang kita bakal pakai ilmu itu buat hal yang lebih nyata: mengambil data dari internet. Siap? Kita mulai!

💎 Definisi Penting

Data Fetching adalah proses mengambil data dari sumber eksternal (biasanya sebuah API/server) dan menampilkannya di aplikasi React kamu. Fetch API adalah fitur bawaan browser yang modern, sedangkan Axios adalah library pihak ketiga yang membuat proses ini lebih mudah dan powerful.

🌐 Apa Itu API dan Kenapa Kita Butuh Data dari Internet?

Bayangkan kamu pergi ke restoran. Kamu nggak langsung masuk ke dapur dan ambil makanan sendiri, kan? Kamu memesan lewat pelayan, pelayan meneruskan ke dapur, dapur masak, lalu makanan dikirim ke mejamu.

API (Application Programming Interface) itu ibarat pelayan itu. Aplikasi React kamu adalah pelanggan, server/database adalah dapur, dan API adalah jalur komunikasi di antaranya. Kamu kirim request, server kirim balik response berisi data.

Dalam konteks fetch API Axios React tutorial ini, kita akan pakai layanan publik gratis bernama JSONPlaceholder — API dummy terbaik untuk belajar!

🔥

Fakta Menarik

Menurut survei State of JS 2024, lebih dari 78% developer React menggunakan Axios atau Fetch API sebagai metode utama mengambil data. Artinya, skill ini bukan opsional — ini wajib dikuasai!

⚡ Fetch API — Senjata Bawaan Browser untuk React Tutorial

Fetch API adalah cara modern browser untuk melakukan HTTP request — dan yang paling keren, kamu nggak perlu install apa-apa! Ini sudah ada di semua browser modern. Mari kita praktikkan langsung.

📋 Praktikum 1: Ambil Daftar Post dengan Fetch API

1

Buat komponen PostList baru

Buat file src/PostList.jsx dan siapkan state untuk menampung data:

PostList.jsx React JSX

import { useState, useEffect } from 'react';

function PostList() {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // Kita isi di langkah berikutnya!
}

2

Tambahkan useEffect + Fetch API

Di dalam komponen, tambahkan useEffect untuk memanggil API saat komponen pertama kali muncul:

Fetch API dengan useEffect React JSX

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(res => {
        if (!res.ok) throw new Error('Gagal ambil data!');
        return res.json();
      })
      .then(data => {
        setPosts(data.slice(0, 5)); // Ambil 5 post saja
        setLoading(false);
      })
      .catch(err => {
        setError(err.message);
        setLoading(false);
      });
  }, []); // [] = hanya jalan sekali saat mount

3

Render hasilnya ke UI

Return JSX

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

  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>
          <strong>{post.title}</strong>
        </li>
      ))}
    </ul>
  );
}

export default PostList;

💡

Tips Penting

Selalu tambahkan penanganan loading dan error state! Ini bukan opsional — ini keharusan. Bayangkan kalau internet user kamu lemot atau API-nya down. Tanpa penanganan ini, aplikasi kamu bakal kelihatan broken.

🚀 Axios — Library yang Bikin Fetch API React Tutorial Lebih Mudah

Kalau Fetch API itu seperti motor bebek — andal tapi kadang perlu perawatan ekstra — maka Axios itu seperti mobil otomatis: lebih nyaman, lebih banyak fitur, dan cocok untuk perjalanan jauh (project besar). Yuk, kita pasang dan cobain!

1

Install Axios ke project React

Terminal / Command Line

npm install axios
# atau jika pakai yarn:
yarn add axios

2

Gunakan Axios dengan async/await (cara modern)

Perhatikan betapa jauh lebih bersih kodenya dibanding Fetch API:

PostListAxios.jsx Axios + async/await

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

function PostListAxios() {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const { data } = await axios.get(
          'https://jsonplaceholder.typicode.com/posts?_limit=5'
        );
        setPosts(data);
      } catch (err) {
        console.error('Error:', err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

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

  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

export default PostListAxios;

⚡

Insight Penting

Perhatikan const { data } = await axios.get(...) — Axios otomatis memparse JSON dan menaruhnya di properti .data. Dengan Fetch API kamu harus panggil res.json() dulu. Ini salah satu keunggulan Axios!

⚖️ Fetch API vs Axios: Kapan Pakai yang Mana?

Pertanyaan klasik dari siapapun yang belajar fetch API Axios React tutorial: "Lebih baik pakai yang mana?" Jawabannya: tergantung kebutuhan! Tabel berikut akan membantu kamu memutuskan:

Kriteria	⚡ Fetch API	🚀 Axios
Perlu install?	✅ Tidak	⚠️ Ya (npm install)
Parse JSON otomatis?	❌ Manual (.json())	✅ Otomatis
Error handling HTTP	❌ Manual (cek res.ok)	✅ Otomatis throw error
Interceptors	❌ Tidak ada	✅ Ada (sangat powerful)
Cancel request	⚠️ AbortController	✅ Lebih mudah
Cocok untuk	Project kecil, sederhana	Project medium–besar

⚠️

Perhatian

Jangan lupa untuk membersihkan request yang sedang berlangsung ketika komponen unmount! Kalau tidak, kamu bisa kena pesan error "Can't perform a React state update on an unmounted component". Gunakan cleanup function di dalam useEffect.

🎁 Bonus: Buat Custom Hook useFetch() yang Reusable

Kamu udah bisa pakai Fetch API dan Axios. Sekarang mari kita naik level: refactor logika fetching menjadi custom hook agar bisa dipakai ulang di seluruh komponen!

hooks/useFetch.js — Custom Hook Reusable Custom Hook

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

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const controller = new AbortController();

    const fetchData = async () => {
      try {
        const { data: result } = await axios.get(url, {
          signal: controller.signal,
        });
        setData(result);
      } catch (err) {
        if (!axios.isCancel(err)) setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();

    // Cleanup: batalkan request jika komponen unmount
    return () => controller.abort();
  }, [url]);

  return { data, loading, error };
}

export default useFetch;

Cara pakainya super simpel di komponen manapun:

Penggunaan useFetch di komponen lain

import useFetch from './hooks/useFetch';

function UserList() {
  const { data: users, loading, error } = useFetch(
    'https://jsonplaceholder.typicode.com/users'
  );

  if (loading) return <p>⏳ Memuat data...</p>;
  if (error)   return <p>❌ {error}</p>;

  return (
    <ul>
      {users?.map(u => <li key={u.id}>👤 {u.name}</li>)}
    </ul>
  );
}

💡

Pro Tips — Next Level

Kalau project kamu makin besar dan kompleks, pertimbangkan untuk menggunakan library seperti TanStack Query (React Query) atau SWR. Keduanya membangun di atas Axios/Fetch tapi menambahkan caching, retry otomatis, dan banyak fitur canggih lainnya. Kita bahas di seri lanjutan!

🎯 Rangkuman — Kamu Sudah Bisa Ambil Data dari Internet!

Luar biasa! Setelah artikel fetch API Axios React tutorial ini, kamu udah punya skill baru yang sangat dicari:

• Fetch API — cara native browser, tanpa dependency, ideal untuk project kecil
• Axios — library powerful dengan auto JSON parsing, error handling lebih baik
• Loading & Error State — UX wajib saat data fetching berlangsung
• Custom Hook useFetch() — kode yang reusable dan clean
• Cleanup Function — mencegah memory leak saat komponen unmount

Artikel ini adalah bagian dari seri Belajar React: React From Zero to Zorro. Artikel berikutnya kita akan belajar cara membuat form yang benar dengan Controlled Component dan validasi input. Seru!

💬 Bagikan pengalamanmu!

Udah coba praktikum di atas? Bingung di bagian mana? Atau punya pertanyaan tentang Fetch API vs Axios? Tulis di kolom komentar di bawah! Kamu juga bisa share artikel ini ke teman yang lagi belajar React — siapa tahu ngebantu mereka!

💬 Tinggalkan Komentar 📤 Share Artikel

🏷️ Tags Artikel

#BelajarReact #ZeroToZorro #FetchAPI #Axios #DataFetching #ReactTutorial #CustomHook #JavaScript

📚

Bagian dari Seri

Belajar React: React From Zero to Zorro

Seri lengkap 16 artikel untuk menguasai React dari dasar hingga mahir. Mulai dari setup lingkungan hingga deploy aplikasi produksi!

🗺️ Lihat Daftar Isi Lengkap Seri

saifiahmada.com → React From Zero to Zorro

→

🧭 Navigasi Artikel

← Sebelumnya · Artikel 6

React Punya Siklus Hidup! Memahami useEffect Hook dengan Praktikum Langsung

#useEffect #LifeCycle

Selanjutnya · Artikel 8 →

Bikin Form yang Proper: Controlled Component dan Validasi Input di React

#Form #Validation