JavaScript Academy · บทเรียน

การจัดการข้อผิดพลาดและรหัสสถานะ

ตรวจสอบ response.ok และจัดการความล้มเหลว

การจัดการข้อผิดพลาดและรหัสสถานะ เป็นบทเรียน JavaScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน JavaScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

ฟังก์ชันส่งคำขอไม่ปฏิเสธเมื่อเกิดข้อผิดพลาด HTTP

ข้อควรระวังที่มักทำให้แปลกใจคือ fetch จะปฏิเสธเฉพาะเมื่อเกิด ความล้มเหลวของเครือข่าย เท่านั้น การตอบกลับสถานะ 404 หรือ 500 ยังคงถือว่าสำเร็จ คุณต้องตรวจสอบสถานะด้วยตนเอง

การตรวจสอบ response.ok

response.ok จะเป็น true เฉพาะเมื่อรหัสสถานะอยู่ในช่วง 200-299 เท่านั้น ใช้เพื่อตรวจหาข้อผิดพลาด HTTP

const response = await fetch(url);
if (!response.ok) {
  console.log("HTTP error:", response.status);
}

การอ่านรหัสสถานะ

response.status ให้รหัสตัวเลข ส่วน response.statusText ให้ข้อความสั้น ๆ ใช้ค่าเหล่านี้แยกกรณีเพื่อจัดการสถานการณ์เฉพาะ

if (response.status === 404) console.log("Not found");
if (response.status === 401) console.log("Unauthorized");

การโยนข้อผิดพลาดเมื่อสถานะไม่สำเร็จ

รูปแบบที่สะอาดคือโยนข้อผิดพลาดเมื่อการตอบกลับไม่สำเร็จ เพื่อให้ catch เดียวจัดการได้ทั้งความล้มเหลวของเครือข่ายและ HTTP

if (!response.ok) {
  throw new Error("Request failed: " + response.status);
}

การครอบด้วย try/catch

เมื่อใช้ async/await ให้ครอบกระบวนการทั้งหมดด้วย try/catch ข้อผิดพลาดของเครือข่ายจะทำให้พรอมิสถูกปฏิเสธและไปอยู่ใน catch เช่นเดียวกับข้อผิดพลาด HTTP ที่คุณโยนขึ้นเอง

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);
}

การแยกประเภทข้อผิดพลาด

การที่คำขอถูกปฏิเสธมักหมายความว่าไม่สามารถเข้าถึงเซิร์ฟเวอร์ได้ การค้นหา DNS ล้มเหลว หรือ CORS บล็อกคำขอ ส่วนการตอบกลับที่ไม่สำเร็จหมายความว่าเซิร์ฟเวอร์ตอบกลับมาแต่มีข้อผิดพลาด เมื่อจำเป็น ควรจัดการสองกรณีนี้แตกต่างกัน

การอ่านเนื้อความของข้อผิดพลาด

ส่วนติดต่อโปรแกรมมักส่งข้อมูลเจสันที่อธิบายข้อผิดพลาดกลับมา ให้อ่านข้อมูลนั้นก่อนโยนข้อผิดพลาด เพื่อให้แสดงข้อความที่เป็นประโยชน์ได้

if (!res.ok) {
  const errBody = await res.json().catch(() => ({}));
  throw new Error(errBody.message || ("Status " + res.status));
}

รหัสสถานะที่พบบ่อย

ควรรู้จักแต่ละกลุ่ม: 2xx สำเร็จ, 3xx เปลี่ยนเส้นทาง, 4xx ข้อผิดพลาดจากไคลเอนต์ (คุณส่งบางอย่างไม่ถูกต้อง), 5xx ข้อผิดพลาดจากเซิร์ฟเวอร์ (เป็นปัญหาของอีกฝ่าย) ระบบจะติดตามการเปลี่ยนเส้นทางส่วนใหญ่โดยอัตโนมัติ

ตัวช่วยที่นำกลับมาใช้ซ้ำได้

รวมการตรวจสอบไว้ในตัวช่วยเพียงตัวเดียว เพื่อให้ทุกจุดที่เรียกใช้จัดการข้อผิดพลาดอย่างสอดคล้องกัน

async function getJSON(url) {
  const res = await fetch(url);
  if (!res.ok) throw new Error("HTTP " + res.status);
  return res.json();
}

การลองใหม่เมื่อเกิดความล้มเหลวชั่วคราว

สำหรับเครือข่ายที่ไม่เสถียร คุณอาจลองใหม่เมื่อเกิดข้อผิดพลาด 5xx หรือข้อผิดพลาดของเครือข่าย ควรจำกัดจำนวนครั้งให้น้อยและเพิ่มช่วงหน่วงเวลา เพื่อไม่ส่งคำขอรบกวนเซิร์ฟเวอร์มากเกินไป

for (let i = 0; i < 3; i++) {
  try { return await getJSON(url); }
  catch (e) { if (i === 2) throw e; }
}

การแสดงข้อผิดพลาดแก่ผู้ใช้

ดักจับข้อผิดพลาดที่ชั้นส่วนติดต่อผู้ใช้เพื่อแสดงข้อความที่เป็นมิตรแทนหน้าจอว่าง อย่าปล่อยให้การปฏิเสธที่ไม่ได้จัดการกลืนคำขอที่ล้มเหลวไปอย่างเงียบ ๆ

getJSON(url)
  .then(render)
  .catch(() => showToast("Could not load data"));

ตรวจสอบความเข้าใจ

การจัดการข้อผิดพลาดของคำขอ

สรุป

ฟังก์ชันส่งคำขอจะปฏิเสธเฉพาะเมื่อเกิดความล้มเหลวของเครือข่าย ดังนั้นควรตรวจสอบ response.ok/response.status และโยนข้อผิดพลาดเมื่อสถานะไม่สำเร็จเสมอ ครอบการเรียกใช้ด้วย try/catch อ่านเนื้อความของข้อผิดพลาดเพื่อดูข้อความ รวมการตรวจสอบไว้ในตัวช่วย และแสดงข้อผิดพลาดที่เป็นมิตรในส่วนติดต่อผู้ใช้

คำถามที่พบบ่อย

บทเรียน “การจัดการข้อผิดพลาดและรหัสสถานะ” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การจัดการข้อผิดพลาดและรหัสสถานะ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การจัดการข้อผิดพลาดและรหัสสถานะ”

ตรวจสอบ response.ok และจัดการความล้มเหลว คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “การจัดการข้อผิดพลาดและรหัสสถานะ” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม

ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ JavaScript Academy