การจัดการข้อผิดพลาดใน JavaScript

บทความนี้อธิบายเกี่ยวกับการจัดการข้อผิดพลาดใน JavaScript

YouTube Video

การจัดการข้อผิดพลาดใน JavaScript

การจัดการข้อผิดพลาดใน JavaScript เป็นคุณสมบัติสำคัญที่ช่วยจับและจัดการข้อผิดพลาดอย่างเหมาะสมเมื่อโปรแกรมพบปัญหาที่ไม่คาดคิด โดยทั่วไปจะใช้ไวยากรณ์ try...catch เพื่อจับและจัดการข้อผิดพลาด นอกจากนี้ เมื่อจัดการกับ Promises หรือการดำเนินการแบบอะซิงโครนัส การจัดการข้อผิดพลาดสามารถทำได้โดยใช้ async/await หรือ Promise.prototype.catch

ไวยากรณ์ try...catch

try...catch ใช้สำหรับจับและจัดการข้อผิดพลาดเมื่อพวกมันเกิดขึ้นภายในบล็อคโค้ด

 1try {
 2    // Code that may throw an error
 3    let result = riskyFunction();
 4    console.log(result);
 5} catch (error) {
 6    // Catch and handle the error
 7    console.error("An error occurred:", error.message);
 8} finally {
 9    // Code that will always execute
10    console.log("Error handling has completed.");
11}

• หากเกิดข้อผิดพลาดภายในบล็อค try การทำงานของโปรแกรมจะหยุดและจะเข้าสู่บล็อค catch
• บล็อค finally จะถูกดำเนินการเสมอ ไม่ว่าจะมีข้อผิดพลาดหรือไม่ มีประโยชน์ในการปล่อยทรัพยากรและการประมวลผลขั้นสุดท้าย รวมถึงสิ่งอื่น ๆ

การโยนข้อผิดพลาด (throw)

ใน JavaScript คุณสามารถเรียกข้อผิดพลาดโดยเจาะจงได้โดยใช้คำสำคัญ throw ใช้สำหรับโยนข้อความข้อผิดพลาดที่กำหนดเองหรือข้อผิดพลาดที่กำหนดเอง

 1function checkAge(age) {
 2    if (age < 18) {
 3        throw new Error("You are under 18 years old.");
 4    }
 5    return "Age verification completed.";
 6}
 7
 8try {
 9    let result = checkAge(15);
10    console.log(result);
11} catch (error) {
12    console.error(error.message);  // Displays "You are under 18 years old."
13}

การจัดการข้อผิดพลาดในการดำเนินการแบบอะซิงโครนัส (Promise และ async/await)

เมื่อดำเนินการแบบอะซิงโครนัส การจัดการข้อผิดพลาดจะแตกต่างออกไปเล็กน้อย เมื่อใช้ Promises ข้อผิดพลาดจะถูกจับด้วยเมธอด catch

1let promise = new Promise((resolve, reject) => {
2    // Asynchronous operation
3    setTimeout(() => reject(new Error("An issue has occurred!")), 1000);
4});
5
6promise
7    .then(result => console.log(result))
8    .catch(error => console.error(error.message));  // Displays "An issue has occurred!"

เมื่อดำเนินการแบบอะซิงโครนัสด้วย async/await คุณสามารถจัดการข้อผิดพลาดด้วย try...catch

 1async function fetchData() {
 2    try {
 3        let response = await fetch('https://api.example.com/data');
 4        let data = await response.json();
 5        console.log(data);
 6    } catch (error) {
 7        console.error("An error occurred while fetching data:", error.message);
 8    }
 9}
10
11fetchData();

สรุป

• คุณสามารถจับข้อผิดพลาดแบบซิงโครนัสได้โดยใช้ไวยากรณ์ try...catch
• คุณสามารถสร้างข้อผิดพลาดของตนเองได้โดยใช้ throw
• ข้อผิดพลาดในการดำเนินการแบบอะซิงโครนัสสามารถจัดการได้โดยใช้เมธอด catch ของ Promise หรือใช้ async/await และ try...catch

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

Error

คลาส Error ถูกใช้สำหรับการจัดการข้อผิดพลาด มันสามารถสร้างข้อผิดพลาดและส่งข้อความข้อผิดพลาดรวมถึง stack trace

1try {
2    throw new Error("Something went wrong");
3} catch (e) {
4    console.log(e.message); // Something went wrong
5}

การใช้งานพื้นฐาน

สามารถสร้างวัตถุ Error ได้เมื่อเกิดข้อผิดพลาด สร้างอินสแตนซ์โดยใช้ new Error() และส่งข้อความข้อผิดพลาด

1const error = new Error("Something went wrong");
2console.log(error.message);  // "Something went wrong"
3console.log(error.name);     // "Error"
4console.log(error.stack);    // Stack trace (information about where the error occurred)

การโยนข้อผิดพลาดด้วย throw

ใน JavaScript คุณสามารถโยนข้อผิดพลาดได้โดยใช้คำสำคัญ throw สิ่งนี้ใช้เพื่อหยุดการประมวลผลในสถานการณ์เฉพาะและส่งการควบคุมไปยังตัวจัดการข้อผิดพลาด

1function doSomething() {
2    throw new Error("This function is not yet implemented");
3}
4
5try {
6    doSomething();
7} catch (e) {
8    console.error(e.message);  // "This function is not yet implemented"
9}

ข้อผิดพลาดที่โยนด้วย throw สามารถจับได้โดยใช้ไวยากรณ์ try...catch

การสร้างข้อผิดพลาดที่กำหนดเอง

ใน JavaScript คุณสามารถสร้างข้อผิดพลาดที่กำหนดเองได้โดยการขยายคลาส Error สิ่งนี้ช่วยให้คุณสร้างข้อผิดพลาดที่ปรับให้เหมาะกับสถานการณ์เฉพาะได้

 1class CustomError extends Error {
 2    constructor(message) {
 3        super(message);  // Call the parent class constructor
 4        this.name = "CustomError";  // Set the error name
 5    }
 6}
 7
 8try {
 9    throw new CustomError("A custom error has occurred");
10} catch (e) {
11    console.error(e.name);    // "CustomError"
12    console.error(e.message); // "A custom error has occurred"
13}

คลาสข้อผิดพลาดที่สร้างขึ้นใน

JavaScript มีคลาสข้อผิดพลาดที่สร้างขึ้นในหลายคลาสที่ขยายคลาส Error สิ่งเหล่านี้ใช้เพื่อแสดงข้อผิดพลาดเฉพาะ

• ReferenceError: เกิดขึ้นเมื่อคุณใช้อ้างอิงตัวแปรที่ไม่มีอยู่
• TypeError: เกิดขึ้นเมื่อลักษณะข้อมูลของค่าต่างจากลักษณะที่คาดหวัง
• RangeError: เกิดขึ้นเมื่อค่าตัวเลขอยู่นอกช่วงที่อนุญาต
• SyntaxError: เกิดขึ้นเมื่อมีการเรียกใช้โค้ดที่ไม่ถูกต้องตามไวยากรณ์
• EvalError: ข้อผิดพลาดที่เกี่ยวข้องกับการใช้ฟังก์ชัน eval() ปัจจุบันไม่ค่อยใช้งานแล้ว
• URIError: เกิดขึ้นเมื่อใช้ URI ที่ไม่ถูกต้อง (ข้อผิดพลาดในการเข้ารหัสหรือถอดรหัส)

ตัวอย่าง: ReferenceError

นี่คือตัวอย่างของ ReferenceError

1try {
2    console.log(undefinedVariable);  // Undefined variable
3} catch (e) {
4    console.error(e.name);    // "ReferenceError"
5    console.error(e.message); // "undefinedVariable is not defined"
6}

ตัวอย่าง: TypeError

นี่คือตัวอย่างของ TypeError

1try {
2    null.f();  // Attempting to call a function on null
3} catch (e) {
4    console.error(e.name);    // "TypeError"
5    console.error(e.message); // "Cannot read properties of null (reading 'f')"
6}

บล็อก finally

ในไวยากรณ์ try...catch ให้ใช้บล็อก finally สำหรับการดำเนินการที่คุณต้องการให้ทำงานไม่ว่าจะมีข้อผิดพลาดเกิดขึ้นหรือไม่

1try {
2    throw new Error("An issue has occurred");
3} catch (e) {
4    console.error(e.message);  // "An issue has occurred"
5} finally {
6    console.log("Performing cleanup");
7}

ในตัวอย่างนี้ การดำเนินการในบล็อก finally จะถูกรันแม้ว่าจะมีการเกิดข้อผิดพลาดขึ้น

คุณสมบัติของวัตถุ Error

วัตถุ Error มีคุณสมบัติดังต่อไปนี้

• message: ข้อความของข้อผิดพลาด
• name: ชื่อของข้อผิดพลาด ซึ่งค่าเริ่มต้นจะเป็น "Error"
• stack: การตรวจสอบเส้นทางของโปรแกรมที่ข้อผิดพลาดเกิดขึ้น ซึ่งมีประโยชน์สำหรับการดีบัก

ประโยชน์ของการจัดการข้อยกเว้น

ด้วยการจัดการข้อผิดพลาดอย่างถูกต้อง คุณสามารถป้องกันไม่ให้แอปพลิเคชันหยุดทำงานเมื่อเกิดพฤติกรรมที่ไม่คาดคิด ด้วยการใช้ไวยากรณ์ try...catch และวัตถุข้อผิดพลาดอย่างเหมาะสม คุณสามารถเขียนโค้ดที่มีความยืดหยุ่นมากขึ้น

 1function divide(a, b) {
 2    if (b === 0) {
 3        throw new Error("Cannot divide by zero");
 4    }
 5    return a / b;
 6}
 7
 8try {
 9    console.log(divide(4, 0));  // An error will occur
10} catch (e) {
11    console.error(e.message);   // "Cannot divide by zero"
12}

สรุป

• คลาส Error ใช้เพื่อแสดงให้เห็นถึงสาเหตุข้อผิดพลาดและเพื่อดำเนินการจัดการข้อผิดพลาด
• ใช้ไวยากรณ์ try...catch...finally เพื่อจัดการข้อผิดพลาดและป้องกันแอปพลิเคชันหยุดทำงานอย่างไม่คาดคิด
• ยังสามารถขยายคลาส Error เพื่อสร้างข้อผิดพลาดในแบบที่ต้องการได้
• คุณสามารถจัดการข้อผิดพลาดหลายประเภทได้โดยใช้คลาสข้อผิดพลาดที่มีอยู่แล้ว เช่น TypeError และ ReferenceError

คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย

YouTube Video