บทความนี้จะสาธิตวิธีการจัดการข้อผิดพลาดบางอย่างเมื่อทำงานกับ Fetch API API ดึงข้อมูลช่วยให้คุณสามารถส่งคำขอไปยังทรัพยากรเครือข่ายระยะไกลได้ เมื่อคุณเรียกใช้เครือข่ายจากระยะไกล หน้าเว็บอาจเกิดข้อผิดพลาดเกี่ยวกับเครือข่ายได้หลายประการ
ส่วนต่อไปนี้จะอธิบายข้อผิดพลาดที่อาจเกิดขึ้นและอธิบายวิธีเขียนโค้ดที่มอบฟังก์ชันการทำงานในระดับที่เหมาะสมซึ่งทนต่อข้อผิดพลาดและสภาพเครือข่ายที่ไม่คาดคิด โค้ดที่ยืดหยุ่นช่วยให้ผู้ใช้พึงพอใจและรักษาระดับการบริการมาตรฐานสำหรับเว็บไซต์
คาดการณ์ข้อผิดพลาดที่อาจเกิดขึ้นกับเครือข่าย
ส่วนนี้จะอธิบายสถานการณ์ที่ผู้ใช้สร้างวิดีโอใหม่ชื่อ "My Travels.mp4" แล้วพยายามอัปโหลดวิดีโอไปยังเว็บไซต์แชร์วิดีโอ
เมื่อใช้การดึงข้อมูล คุณควรพิจารณาเส้นทางที่ใช้ได้อย่างราบรื่นซึ่งผู้ใช้อัปโหลดวิดีโอได้สำเร็จ อย่างไรก็ตาม ยังมีเส้นทางอื่นๆ ที่อาจไม่ราบรื่นนัก แต่นักพัฒนาเว็บต้องวางแผนไว้ เส้นทาง (ที่ไม่พึงพอใจ) ดังกล่าวอาจเกิดขึ้นจากข้อผิดพลาดของผู้ใช้ สภาพแวดล้อมที่ไม่คาดคิด หรือข้อบกพร่องในเว็บไซต์แชร์วิดีโอ
ตัวอย่างข้อผิดพลาดของผู้ใช้
- ผู้ใช้อัปโหลดไฟล์ภาพ (เช่น JPEG) แทนไฟล์วิดีโอ
- ผู้ใช้เริ่มอัปโหลดไฟล์วิดีโอที่ไม่ถูกต้อง จากนั้นระหว่างการอัปโหลด ผู้ใช้ระบุไฟล์วิดีโอที่ถูกต้องสำหรับการอัปโหลด
- ผู้ใช้คลิก "ยกเลิกการอัปโหลด" โดยไม่ได้ตั้งใจขณะที่อัปโหลดวิดีโอ
ตัวอย่างการเปลี่ยนแปลงด้านสิ่งแวดล้อม
- การเชื่อมต่ออินเทอร์เน็ตออฟไลน์ขณะอัปโหลดวิดีโอ
- เบราว์เซอร์รีสตาร์ทขณะที่อัปโหลดวิดีโอ
- เซิร์ฟเวอร์ของเว็บไซต์แชร์วิดีโอรีสตาร์ทขณะที่อัปโหลดวิดีโอ
ตัวอย่างข้อผิดพลาดเกี่ยวกับเว็บไซต์แชร์วิดีโอ
- เว็บไซต์แชร์วิดีโอไม่สามารถจัดการชื่อไฟล์ที่มีช่องว่างได้ ต้องการชื่อ เช่น
"My_Travels.mp4"หรือ"MyTravels.mp4"แทน"My Travels.mp4" - เว็บไซต์การแชร์วิดีโออัปโหลดวิดีโอที่มีขนาดใหญ่เกินขนาดไฟล์สูงสุดที่ยอมรับไม่ได้
- เว็บไซต์การแชร์วิดีโอไม่รองรับตัวแปลงรหัสวิดีโอในวิดีโอที่อัปโหลด
ตัวอย่างเหล่านี้อาจเกิดขึ้นได้ในชีวิตจริง ซึ่งคุณอาจเคยเจอมาแล้ว! ลองเลือกตัวอย่างหนึ่งจากแต่ละหมวดหมู่ก่อนหน้านี้ และพูดคุยถึงประเด็นต่อไปนี้
- ลักษณะการทำงานเริ่มต้นจะเป็นอย่างไรหากบริการแชร์วิดีโอจัดการกับตัวอย่างที่ระบุไม่ได้
- ผู้ใช้คาดหวังว่าจะเกิดอะไรขึ้นในตัวอย่าง
- เราจะปรับปรุงกระบวนการนี้ได้อย่างไร
จัดการข้อผิดพลาดด้วย Fetch API
โปรดทราบว่าตัวอย่างโค้ดต่อไปนี้ใช้ await ระดับบนสุด (การรองรับเบราว์เซอร์) เนื่องจากฟีเจอร์นี้ช่วยให้โค้ดของคุณเรียบง่ายขึ้น
เมื่อ Fetch API แสดงข้อผิดพลาด
ตัวอย่างนี้ใช้คำสั่งtry/catch บล็อก เพื่อตรวจหาข้อผิดพลาดที่เกิดขึ้นภายในบล็อก try เช่น หาก Fetch API ดึงข้อมูลทรัพยากรที่ระบุไม่ได้ ระบบจะแสดงข้อผิดพลาด ภายในบล็อก catch เช่นนี้ โปรดดูแลให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่มีความหมาย หากมีไอคอนหมุนซึ่งเป็นอินเทอร์เฟซผู้ใช้ทั่วไปที่แสดงความคืบหน้าบางอย่างให้ผู้ใช้เห็น คุณสามารถดำเนินการต่อไปนี้ภายในการบล็อก catch ได้
- นําตัวหมุนออกจากหน้า
- แสดงข้อความที่เป็นประโยชน์ซึ่งอธิบายสิ่งที่ผิดพลาดและตัวเลือกที่ผู้ใช้ทำได้
- แสดงปุ่ม "ลองอีกครั้ง" แก่ผู้ใช้ตามตัวเลือกที่มี
- เบื้องหลัง ระบบจะส่งรายละเอียดของข้อผิดพลาดไปยังบริการติดตามข้อผิดพลาดหรือแบ็กเอนด์ การดำเนินการนี้จะบันทึกข้อผิดพลาดเพื่อให้สามารถวินิจฉัยในขั้นตอนต่อไป
try {
const response = await fetch('https://website');
} catch (error) {
// TypeError: Failed to fetch
console.log('There was an error', error);
}
ในขั้นตอนต่อมา ขณะที่วินิจฉัยข้อผิดพลาดที่บันทึกไว้ คุณสามารถเขียนกรณีทดสอบเพื่อจับข้อผิดพลาดดังกล่าวก่อนที่ผู้ใช้จะรู้ตัวว่าเกิดข้อผิดพลาด การทดสอบอาจเป็นการทดสอบหน่วย การผสานรวม หรือการยอมรับ ทั้งนี้ขึ้นอยู่กับข้อผิดพลาด
เมื่อรหัสสถานะเครือข่ายแสดงข้อผิดพลาด
ตัวอย่างโค้ดนี้จะส่งคำขอไปยังบริการทดสอบ HTTP ที่ตอบสนองด้วยรหัสสถานะ HTTP 429 Too Many Requests เสมอ สิ่งที่น่าสนใจคือคำตอบไม่ได้ไปถึงบล็อก catch สถานะ 404 จะไม่แสดงข้อผิดพลาดของเครือข่าย แต่จะแก้ไขตามปกติได้
หากต้องการตรวจสอบว่ารหัสสถานะ HTTP สำเร็จหรือไม่ คุณสามารถใช้ตัวเลือกใดก็ได้ต่อไปนี้
- ใช้พร็อพเพอร์ตี้
Response.okเพื่อระบุว่ารหัสสถานะอยู่ในช่วง200ถึง299หรือไม่ - ใช้พร็อพเพอร์ตี้
Response.statusเพื่อระบุว่าการตอบกลับสําเร็จหรือไม่ - ใช้ข้อมูลเมตาอื่นๆ เช่น
Response.headersเพื่อประเมินว่าการตอบกลับสําเร็จหรือไม่
let response;
try {
response = await fetch('https://httpbin.org/status/429');
} catch (error) {
console.log('There was an error', error);
}
// Uses the 'optional chaining' operator
if (response?.ok) {
console.log('Use the response here!');
} else {
console.log(`HTTP Response Code: ${response?.status}`)
}
แนวทางปฏิบัติแนะนำคือให้ทำงานร่วมกับคนในองค์กรและทีมเพื่อทำความเข้าใจรหัสสถานะการตอบกลับ HTTP ที่อาจเกิดขึ้น ในบางครั้ง นักพัฒนาซอฟต์แวร์แบ็กเอนด์ ฝ่ายปฏิบัติการของนักพัฒนา และวิศวกรบริการสามารถให้ข้อมูลเชิงลึกที่เฉพาะเจาะจงเกี่ยวกับกรณีปัญหาที่อาจเป็นไปได้ที่คุณไม่คาดคิด
เมื่อเกิดข้อผิดพลาดในการแยกวิเคราะห์การตอบกลับของเครือข่าย
ตัวอย่างโค้ดนี้แสดงข้อผิดพลาดอีกประเภทหนึ่งที่อาจเกิดขึ้นเมื่อแยกวิเคราะห์ข้อมูลโค้ดตอบกลับ อินเทอร์เฟซ Response มีวิธีการที่สะดวกในการแยกวิเคราะห์ข้อมูลประเภทต่างๆ เช่น ข้อความหรือ JSON ในโค้ดต่อไปนี้ ระบบจะส่งคําขอเครือข่ายไปยังบริการทดสอบ HTTP ซึ่งจะแสดงสตริง HTML เป็นเนื้อหาการตอบกลับ อย่างไรก็ตาม ระบบพยายามแยกวิเคราะห์เนื้อหาการตอบกลับเป็น JSON ซึ่งทำให้เกิดข้อผิดพลาด
let json;
try {
const response = await fetch('https://httpbin.org/html');
json = await response.json();
} catch (error) {
if (error instanceof SyntaxError) {
// Unexpected token < in JSON
console.log('There was a SyntaxError', error);
} else {
console.log('There was an error', error);
}
}
if (json) {
console.log('Use the JSON here!', json);
}
คุณต้องเตรียมโค้ดให้รองรับรูปแบบการตอบกลับที่หลากหลาย และตรวจสอบว่าการตอบกลับที่ไม่คาดคิดจะไม่ทำให้หน้าเว็บใช้งานไม่ได้สำหรับผู้ใช้
ลองพิจารณาสถานการณ์ต่อไปนี้ คุณมีทรัพยากรระยะไกลที่แสดงผลการตอบกลับ JSON ที่ถูกต้อง และระบบแยกวิเคราะห์ข้อมูลดังกล่าวด้วยเมธอด Response.json() เรียบร้อยแล้ว บริการอาจหยุดทำงาน เมื่อปิดแล้ว ระบบจะแสดง 500 Internal Server Error หากไม่ได้ใช้เทคนิคการจัดการข้อผิดพลาดที่เหมาะสมระหว่างการแยกวิเคราะห์ JSON หน้าเว็บอาจใช้งานไม่ได้สำหรับผู้ใช้เนื่องจากระบบจะแสดงข้อผิดพลาดที่ไม่ได้รับการจัดการ
กรณีที่ต้องยกเลิกคำขอเครือข่ายก่อนที่คำขอจะเสร็จสมบูรณ์
ตัวอย่างโค้ดนี้ใช้ AbortController เพื่อยกเลิกคำขอที่อยู่ระหว่างดำเนินการ คำขอที่อยู่ระหว่างดำเนินการคือคำขอเครือข่ายที่เริ่มดำเนินการแล้วแต่ยังไม่เสร็จสมบูรณ์
สถานการณ์ที่คุณอาจต้องยกเลิกคำขอที่อยู่ระหว่างดำเนินการอาจแตกต่างกันไป แต่ท้ายที่สุดแล้วขึ้นอยู่กับ Use Case และสภาพแวดล้อมของคุณ โค้ดต่อไปนี้แสดงวิธีส่ง AbortSignal ไปยัง Fetch API AbortSignal แนบอยู่กับ AbortController และ AbortController มีเมธอด abort() ซึ่งบ่งบอกให้เบราว์เซอร์ยกเลิกคําขอเครือข่าย
const controller = new AbortController();
const signal = controller.signal;
// Cancel the fetch request in 500ms
setTimeout(() => controller.abort(), 500);
try {
const url = 'https://httpbin.org/delay/1';
const response = await fetch(url, { signal });
console.log(response);
} catch (error) {
// DOMException: The user aborted a request.
console.log('Error: ', error)
}
บทสรุป
สิ่งสำคัญอย่างหนึ่งในการจัดการข้อผิดพลาดคือการระบุส่วนต่างๆ ที่อาจทำให้เกิดข้อผิดพลาด ตรวจสอบว่าคุณมีทางเลือกสำรองที่เหมาะสมสำหรับผู้ใช้สำหรับแต่ละสถานการณ์ ถามตัวเองด้วยคำถามต่อไปนี้เกี่ยวกับคำขอดึงข้อมูล
- จะเกิดอะไรขึ้นหากเซิร์ฟเวอร์เป้าหมายหยุดทำงาน
- จะเกิดอะไรขึ้นหากการดึงข้อมูลได้รับการตอบกลับที่ไม่คาดคิด
- จะเกิดอะไรขึ้นหากการเชื่อมต่ออินเทอร์เน็ตของผู้ใช้ไม่สำเร็จ
คุณยังร่างผังงานที่อธิบายฟังก์ชันการทำงานและอินเทอร์เฟซผู้ใช้สำหรับสถานการณ์ต่างๆ ได้ด้วย ทั้งนี้ขึ้นอยู่กับความซับซ้อนของหน้าเว็บ