Mengambil Data saat Mount
Ambil JSON dari API di dalam useEffect, simpan respons dalam state, dan jalankan pengambilan hanya sekali dengan array dependensi kosong.
Mengambil Data saat Mount adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.
Pola Pengambilan Data
Pola pengambilan data React standar: 1) tentukan status pemuatan, kesalahan, dan data, 2) ambil data dalam useEffect dengan dependensi kosong [], 3) perbarui status dalam fungsi panggilan balik, 4) lakukan perenderan berdasarkan status.
Contoh Lengkap
Contoh lengkap yang mengambil data pengguna saat pemasangan, dengan penanganan pemuatan dan kesalahan.
interface User { id: number; name: string; email: string; }
function UserList() {
const [users, setUsers] = useState<User[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
fetch('/api/users')
.then(res => {
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return res.json();
})
.then(data => setUsers(data))
.catch(err => setError(err.message))
.finally(() => setLoading(false));
}, []);
if (loading) return <Spinner />;
if (error) return <ErrorMessage message={error} />;
return <ul>{users.map(u => <UserItem key={u.id} {...u} />)}</ul>;
}Menggunakan async/await dalam useEffect
Panggilan balik useEffect tidak dapat langsung bersifat async (panggilan tersebut akan mengembalikan Promise, yang akan dianggap React sebagai fungsi pembersihan). Sebagai gantinya, tentukan fungsi async di dalamnya dan segera panggil fungsi tersebut.
useEffect(() => {
async function fetchUsers() {
try {
const res = await fetch('/api/users');
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const data = await res.json();
setUsers(data);
} catch (err) {
setError((err as Error).message);
} finally {
setLoading(false);
}
}
fetchUsers();
}, []);Memeriksa Status Respons
fetch tidak menghasilkan kesalahan untuk kesalahan HTTP (4xx, 5xx) — hanya untuk kegagalan jaringan. Selalu periksa response.ok dan hasilkan kesalahan secara manual untuk respons yang bermasalah.
const res = await fetch('/api/data');
if (!res.ok) {
// Could also use res.status for specific handling
throw new Error(`Server responded ${res.status}: ${res.statusText}`);
}
const data = await res.json();Mengambil Data Saat Dependensi Berubah
Tambahkan dependensi (seperti ID dari parameter rute atau properti) ke larik dependensi efek. Efek akan berjalan kembali dan mengambil data terbaru setiap kali dependensi berubah.
const { userId } = useParams();
useEffect(() => {
if (!userId) return;
setLoading(true);
fetch(`/api/users/${userId}`)
.then(r => r.json())
.then(setUser)
.finally(() => setLoading(false));
}, [userId]);Permintaan POST dalam Efek
Efek juga dapat mengirim permintaan POST/PUT/DELETE, tetapi biasanya permintaan tersebut dipicu oleh acara (pengiriman formulir atau klik tombol), bukan oleh efek saat pemasangan. Gunakan efek untuk pemuatan data dan penangan acara untuk mutasi.
Hook useFetch Kustom
Ekstrak pola pengambilan data, pemuatan, dan kesalahan ke dalam hook kustom agar dapat digunakan kembali di berbagai komponen.
function useFetch<T>(url: string) {
const [data, setData] = useState<T | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
setLoading(true);
fetch(url)
.then(r => { if (!r.ok) throw new Error(`${r.status}`); return r.json(); })
.then(setData)
.catch(e => setError(e.message))
.finally(() => setLoading(false));
}, [url]);
return { data, loading, error };
}Mengurai JSON dengan Aman
Selalu bungkus res.json() dalam try/catch — JSON yang tidak valid menghasilkan SyntaxError. Blok catch luar akan menanganinya, tetapi mengetahui sumbernya membantu proses penelusuran kesalahan.
Konfigurasi URL Dasar API
Jangan menulis URL API secara langsung. Gunakan variabel lingkungan (import.meta.env.VITE_API_URL) untuk URL dasar. Buat file api.ts terpusat dengan pembungkus pengambilan data yang telah dikonfigurasi.
const API_BASE = import.meta.env.VITE_API_URL;
async function apiFetch<T>(path: string): Promise<T> {
const res = await fetch(`${API_BASE}${path}`, {
headers: { 'Authorization': `Bearer ${getToken()}` }
});
if (!res.ok) throw new Error(`API error ${res.status}`);
return res.json();
}Kapan Beralih ke React Query
Pola pengambilan data manual cocok untuk kasus sederhana. Saat Anda memerlukan penyimpanan sementara, pengambilan data ulang di latar belakang, penomoran halaman, atau mutasi, beralihlah ke React Query (TanStack Query) — pustaka ini menangani semua pola tersebut dengan andal.
Menampilkan Kerangka Pemuatan
Alih-alih pemutar, tampilkan antarmuka kerangka yang bentuknya sesuai dengan konten yang telah dimuat. Cara ini mengurangi waktu pemuatan yang dirasakan dan mencegah pergeseran tata letak.
Pemeriksaan Singkat
Mengapa Anda tidak dapat membuat panggilan balik useEffect langsung bersifat async?
Rangkuman: Pengambilan Data dalam useEffect
Tentukan status pemuatan, kesalahan, dan data. Ambil data dalam useEffect dengan dependensi kosong []. Tentukan fungsi async di dalamnya — jangan membuat panggilan baliknya bersifat async. Selalu periksa res.ok. Tambahkan URL/ID ke dependensi untuk pengambilan data dinamis. Ekstrak pola tersebut ke hook kustom useFetch agar dapat digunakan kembali. Pertimbangkan TanStack Query untuk pengambilan data dalam aplikasi produksi.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Mengambil Data saat Mount” gratis?
Ya — teks lengkap “Mengambil Data saat Mount” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Mengambil Data saat Mount”?
Ambil JSON dari API di dalam useEffect, simpan respons dalam state, dan jalankan pengambilan hanya sekali dengan array dependensi kosong. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Frontend Academy?
Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.
Berapa lama pelajaran “Mengambil Data saat Mount” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?
Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Dasar useEffect: Dependensi dan Pembersihan
- Mengambil Data saat Mount
- Menangani State Loading dan Error
- AbortController untuk Pembersihan