Menangani Error dan Kode Status
Periksa response.ok dan tangani kegagalan.
Menangani Error dan Kode Status adalah pelajaran JavaScript 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 JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 4 pelajaran total.
Fetch Tidak Menolak Kesalahan HTTP
Hal yang sering mengejutkan: fetch hanya menolak saat terjadi kegagalan jaringan. Respons 404 atau 500 tetap dianggap berhasil. Anda harus memeriksa statusnya sendiri.
Memeriksa response.ok
response.ok bernilai true hanya untuk kode status dalam rentang 200–299. Gunakan ini untuk mendeteksi kesalahan HTTP.
const response = await fetch(url);
if (!response.ok) {
console.log("HTTP error:", response.status);
}Membaca Kode Status
response.status memberikan kode numerik, sedangkan response.statusText memberikan pesan singkat. Gunakan keduanya untuk menangani kasus tertentu.
if (response.status === 404) console.log("Not found");
if (response.status === 401) console.log("Unauthorized");Melemparkan pada Status Buruk
Pola yang rapi adalah melemparkan Error ketika respons tidak baik, sehingga satu catch dapat menangani kegagalan jaringan dan HTTP.
if (!response.ok) {
throw new Error("Request failed: " + response.status);
}Membungkusnya dalam try/catch
Dengan async/await, bungkus seluruh alur dalam try/catch. Kesalahan jaringan menolak Promise dan masuk ke catch; kesalahan HTTP yang Anda lemparkan juga demikian.
try {
const res = await fetch(url);
if (!res.ok) throw new Error("Status " + res.status);
const data = await res.json();
} catch (err) {
console.log("Failed:", err.message);
}Membedakan Jenis Kesalahan
fetch yang ditolak biasanya berarti server tidak dapat dijangkau, DNS gagal, atau CORS memblokirnya. Respons yang tidak baik berarti server menjawab, tetapi dengan kesalahan. Tangani keduanya secara berbeda jika diperlukan.
Membaca Isi Kesalahan
API sering mengembalikan JSON yang menjelaskan kesalahan. Bacalah sebelum melemparkan kesalahan agar Anda dapat menampilkan pesan yang berguna.
if (!res.ok) {
const errBody = await res.json().catch(() => ({}));
throw new Error(errBody.message || ("Status " + res.status));
}Kode Status Umum
Pahami kelompoknya: 2xx berarti berhasil, 3xx berarti pengalihan, 4xx berarti kesalahan klien (ada yang salah dalam kiriman Anda), dan 5xx berarti kesalahan server (kesalahan di pihak mereka). Fetch secara otomatis mengikuti sebagian besar pengalihan.
Pembantu yang Dapat Digunakan Kembali
Letakkan pemeriksaan di satu pembantu terpusat agar setiap lokasi pemanggilan mendapatkan penanganan kesalahan yang konsisten.
async function getJSON(url) {
const res = await fetch(url);
if (!res.ok) throw new Error("HTTP " + res.status);
return res.json();
}Mencoba Kembali Kegagalan Sementara
Untuk jaringan yang tidak stabil, Anda dapat mencoba kembali setelah kesalahan 5xx atau kesalahan jaringan. Batasi jumlah percobaan dan tambahkan jeda agar server tidak terus-menerus dibebani.
for (let i = 0; i < 3; i++) {
try { return await getJSON(url); }
catch (e) { if (i === 2) throw e; }
}Menampilkan Kesalahan kepada Pengguna
Tangkap kesalahan di lapisan antarmuka pengguna untuk menampilkan pesan yang ramah, bukan layar kosong. Jangan pernah membiarkan penolakan yang tidak ditangani menelan permintaan yang gagal secara diam-diam.
getJSON(url)
.then(render)
.catch(() => showToast("Could not load data"));Pemeriksaan Singkat
Penanganan kesalahan fetch.
Ringkasan
Fetch hanya menolak saat terjadi kegagalan jaringan, jadi selalu periksa response.ok/response.status dan lemparkan kesalahan untuk status yang buruk. Bungkus pemanggilan dalam try/catch, baca isi kesalahan untuk mendapatkan pesan, pusatkan pemeriksaan dalam pembantu, dan tampilkan kesalahan yang ramah di antarmuka pengguna.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Menangani Error dan Kode Status” gratis?
Ya — teks lengkap “Menangani Error dan Kode Status” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus JavaScript Academy, upgrade ke CoddyKit PRO. Kursus JavaScript Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Menangani Error dan Kode Status”?
Periksa response.ok dan tangani kegagalan. Kamu berlatih JavaScript 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 JavaScript Academy?
Tidak diperlukan pengalaman sebelumnya. JavaScript 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 Error dan Kode Status” 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 JavaScript Academy ini?
Ya. Setiap pelajaran JavaScript 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
- Membuat Permintaan GET
- POST dan Mengirim Data
- Menangani Error dan Kode Status
- Membatalkan Permintaan dengan AbortController