Menangani State Loading dan Error
Tambahkan variabel state loading dan error ke komponen, tampilkan indikator pemuatan saat mengambil data, dan tampilkan pesan error yang ramah jika gagal.
Menangani State Loading dan Error adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 3 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.
Tiga Status Data Asinkron
Setiap operasi data asinkron memiliki tiga status: pemuatan (permintaan sedang berlangsung), berhasil (data diterima), dan kesalahan (permintaan gagal). Antarmuka Anda harus menangani ketiganya secara eksplisit.
Antarmuka Pemuatan
Saat memuat, tampilkan pemutar, kerangka, atau pengganti. Cegah pengiriman ulang formulir dengan menonaktifkan tombol selama pemuatan. Pengguna harus selalu mengetahui bahwa aplikasi sedang bekerja.
if (loading) {
return (
<div className="loading-state">
<Spinner size="lg" />
<p>Loading users...</p>
</div>
);
}Antarmuka Kesalahan
Tampilkan pesan kesalahan yang mudah dipahami ketika permintaan gagal. Sertakan tindakan coba lagi agar pengguna tidak terhenti. Catat kesalahan lengkap untuk pengembang.
if (error) {
return (
<div className="error-state">
<p>Failed to load data: {error}</p>
<button onClick={() => setRetry(n => n + 1)}>Try Again</button>
</div>
);
}Mekanisme Coba Lagi
Tambah penghitung percobaan lagi dalam status dan masukkan penghitung tersebut ke larik dependensi efek. Ketika pengguna mengeklik Coba Lagi, penghitung berubah dan memicu efek kembali.
const [retry, setRetry] = useState(0);
useEffect(() => {
// fetch...
}, [userId, retry]); // retry in deps triggers re-fetch
<button onClick={() => setRetry(n => n + 1)}>Retry</button>Praktik Terbaik Status Pemuatan
1) Tampilkan status pemuatan segera saat permintaan dimulai. 2) Buat status pemuatan tetap minimal — jangan mengaturnya ulang jika data sementara tersedia. 3) Untuk penomoran halaman, bedakan pemuatan awal dari pemuatan berikutnya. 4) Jangan pernah menampilkan pemutar selama kurang dari 100 md — tambahkan penundaan atau tetap tampilkan data sebelumnya.
Pembaruan Optimistis
Pembaruan optimistis: perbarui antarmuka segera sebelum server mengonfirmasi, lalu kembalikan perubahan jika permintaan gagal. Cara ini memberikan kesan respons yang seketika.
// Optimistic:
const prevItems = items;
setItems(items.filter(i => i.id !== id)); // immediate UI update
try {
await deleteItem(id);
} catch (err) {
setItems(prevItems); // revert on failure
showError('Delete failed. Changes reverted.');
}Batas Kesalahan untuk Kesalahan Perenderan
Gunakan Batas Kesalahan (komponen kelas dengan componentDidCatch) untuk menangkap kesalahan yang muncul selama perenderan. Batas tersebut menampilkan antarmuka cadangan alih-alih membuat seluruh aplikasi berhenti.
Pemetaan Kesalahan HTTP
Petakan kode status HTTP ke pesan yang mudah dipahami pengguna. 401 → arahkan ke halaman masuk. 403 → tampilkan 'Akses ditolak'. 404 → 'Tidak ditemukan'. 429 → 'Terlalu banyak permintaan — silakan tunggu'. 500+ → 'Kesalahan server — coba lagi'.
function mapStatusToMessage(status: number): string {
if (status === 401) return 'Please sign in to continue';
if (status === 403) return 'You don\'t have permission to do this';
if (status === 404) return 'This item no longer exists';
if (status === 429) return 'Too many requests. Please wait a moment';
if (status >= 500) return 'Server error. We\'re looking into it';
return 'Something went wrong';
}useReducer untuk Status Pengambilan Data yang Kompleks
Ketika status pemuatan, kesalahan, dan data saling berinteraksi (misalnya, menghapus kesalahan saat memuat ulang), penggunaan pereduksi lebih rapi daripada beberapa pemanggilan useState.
type FetchState<T> =
| { status: 'idle' }
| { status: 'loading' }
| { status: 'success'; data: T }
| { status: 'error'; message: string };
const [state, dispatch] = useReducer(fetchReducer, { status: 'idle' });Suspense — Masa Depan
React Suspense dengan kerangka kerja pengambilan data (React Query, Relay, Next.js) memungkinkan komponen 'ditangguhkan' saat menunggu data. Batas Suspense induk secara otomatis menampilkan antarmuka cadangan. Inilah arah perkembangan React.
Kesalahan Jaringan vs Kesalahan Server
Kesalahan jaringan (tidak ada koneksi, CORS) menghasilkan kesalahan di blok catch. Kesalahan server (4xx, 5xx) selesai secara normal — Anda harus memeriksa res.ok untuk mendeteksinya. Penanganan kesalahan Anda harus menangani kedua kategori tersebut.
Pemeriksaan Singkat
Apa yang dimaksud dengan 'pembaruan optimistis'?
Rangkuman: Status Pemuatan dan Kesalahan
Selalu tangani status pemuatan, keberhasilan, dan kesalahan. Tampilkan antarmuka pemuatan yang bermakna. Petakan kesalahan HTTP ke pesan yang mudah dipahami pengguna. Terapkan mekanisme coba lagi. Gunakan pembaruan optimistis untuk umpan balik yang terasa seketika. Gunakan useReducer untuk status pengambilan data yang saling terkoordinasi. Suspense pada akhirnya akan lebih menyederhanakan pola ini.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Menangani State Loading dan Error” gratis?
Ya — teks lengkap “Menangani State Loading dan Error” 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 “Menangani State Loading dan Error”?
Tambahkan variabel state loading dan error ke komponen, tampilkan indikator pemuatan saat mengambil data, dan tampilkan pesan error yang ramah jika gagal. 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 3 dari 4.
Berapa lama pelajaran “Menangani State Loading dan Error” 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