Mengendalikan Error dan Kod Status
Semak response.ok dan kendalikan kegagalan.
Mengendalikan Error dan Kod Status ialah pelajaran Akademi JavaScript percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Akademi JavaScript, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Akademi JavaScript merangkumi sejumlah 4 pelajaran.
Fetch Tidak Menolak Ralat HTTP
Inilah perangkap yang sering mengejutkan: fetch hanya menolak apabila berlaku kegagalan rangkaian. Respons 404 atau 500 masih dianggap berjaya. Anda mesti menyemak status itu sendiri.
Menyemak response.ok
response.ok hanya bernilai true untuk kod status dalam julat 200-299. Gunakannya untuk mengesan ralat HTTP.
const response = await fetch(url);
if (!response.ok) {
console.log("HTTP error:", response.status);
}Membaca Kod Status
response.status memberikan kod berangka, manakala response.statusText memberikan mesej ringkas. Gunakan kedua-duanya untuk mengendalikan keadaan tertentu.
if (response.status === 404) console.log("Not found");
if (response.status === 401) console.log("Unauthorized");Menjana Ralat bagi Status Buruk
Pola yang kemas adalah dengan menjana ralat apabila respons tidak ok, supaya satu catch dapat mengendalikan kegagalan rangkaian dan HTTP.
if (!response.ok) {
throw new Error("Request failed: " + response.status);
}Membungkus dalam try/catch
Dengan async/await, bungkus keseluruhan aliran dalam try/catch. Ralat rangkaian menolak Promise dan masuk ke dalam catch; ralat HTTP yang anda jana juga begitu.
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);
}Membezakan Jenis Ralat
Pengambilan data yang ditolak biasanya bermaksud pelayan tidak dapat dicapai, DNS gagal atau CORS menyekatnya. Respons yang tidak ok bermaksud pelayan menjawab tetapi dengan ralat. Kendalikan kedua-duanya secara berbeza apabila perlu.
Membaca Kandungan Ralat
API sering mengembalikan JSON yang menerangkan ralat. Bacanya sebelum menjana ralat supaya anda boleh memaparkan mesej yang berguna.
if (!res.ok) {
const errBody = await res.json().catch(() => ({}));
throw new Error(errBody.message || ("Status " + res.status));
}Kod Status Biasa
Kenali kumpulannya: 2xx berjaya, 3xx ubah hala, 4xx ralat pelanggan (anda menghantar sesuatu yang salah), 5xx ralat pelayan (kesalahan mereka). Fetch mengikut kebanyakan ubah hala secara automatik.
Pembantu yang Boleh Digunakan Semula
Pusatkan semakan dalam satu pembantu supaya setiap tempat panggilan mendapat pengendalian ralat yang konsisten.
async function getJSON(url) {
const res = await fetch(url);
if (!res.ok) throw new Error("HTTP " + res.status);
return res.json();
}Mencuba Semula Kegagalan Sementara
Untuk rangkaian yang tidak stabil, anda boleh mencuba semula selepas ralat 5xx atau ralat rangkaian. Hadkan bilangan percubaan dan tambahkan kelewatan supaya pelayan tidak dibebani.
for (let i = 0; i < 3; i++) {
try { return await getJSON(url); }
catch (e) { if (i === 2) throw e; }
}Memaparkan Ralat kepada Pengguna
Tangkap ralat pada lapisan antara muka pengguna untuk memaparkan mesej yang mesra dan bukannya skrin kosong. Jangan biarkan penolakan yang tidak dikendalikan menelan permintaan yang gagal secara senyap.
getJSON(url)
.then(render)
.catch(() => showToast("Could not load data"));Semakan Pantas
Pengendalian ralat fetch.
Ringkasan
Fetch hanya menolak apabila berlaku kegagalan rangkaian, jadi sentiasa semak response.ok/response.status dan jana ralat bagi status buruk. Bungkus panggilan dalam try/catch, baca kandungan ralat untuk mendapatkan mesej, pusatkan semakan dalam pembantu dan paparkan ralat yang mesra dalam antara muka pengguna.
Pelajari JavaScript dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 59
- Pelajaran
- 200
Soalan Lazim
Adakah pelajaran “Mengendalikan Error dan Kod Status” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Akademi JavaScript, termasuk “Mengendalikan Error dan Kod Status”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Akademi JavaScript merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Mengendalikan Error dan Kod Status”?
Semak response.ok dan kendalikan kegagalan. Anda berlatih Akademi JavaScript menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Akademi JavaScript?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Akademi JavaScript di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.
Berapa lamakah pelajaran “Mengendalikan Error dan Kod Status” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Akademi JavaScript ini?
Ya. Setiap pelajaran Akademi JavaScript menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Membuat Permintaan GET
- POST dan Penghantaran Data
- Mengendalikan Error dan Kod Status
- Membatalkan Permintaan dengan AbortController