Articles
Giới thiệu về JavaScript
Xử lý lỗi trong JavaScript

Xử lý lỗi trong JavaScript

Bài viết này giải thích cách xử lý lỗi trong JavaScript.

YouTube Video

Xử lý lỗi trong JavaScript

Xử lý lỗi trong JavaScript là một tính năng quan trọng để bắt và xử lý các lỗi một cách thích hợp khi chương trình gặp phải các vấn đề không mong muốn. Thông thường, cú pháp try...catch được sử dụng để bắt và xử lý lỗi. Ngoài ra, khi làm việc với Promise hoặc các hoạt động bất đồng bộ, việc xử lý lỗi cũng có thể được thực hiện bằng async/await hoặc Promise.prototype.catch.

Cú pháp try...catch

try...catch được sử dụng để bắt và xử lý lỗi khi chúng xảy ra trong một khối mã.

 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}
  • Nếu một lỗi xảy ra bên trong khối try, việc thực thi chương trình sẽ bị gián đoạn và khối catch sẽ được thực thi.
  • Khối finally luôn được thực thi, bất kể có lỗi xảy ra hay không. Nó hữu ích để giải phóng tài nguyên và thực hiện các xử lý cuối cùng, cùng với các điều khác.

Ném lỗi (throw)

Trong JavaScript, bạn có thể kích hoạt lỗi một cách rõ ràng bằng từ khóa throw. Nó được sử dụng khi ném ra các thông báo lỗi tùy chỉnh hoặc lỗi tùy chỉnh.

 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}

Xử lý lỗi trong các hoạt động bất đồng bộ (Promise và async/await)

Khi thực hiện các hoạt động bất đồng bộ, việc xử lý lỗi có một số điểm khác biệt. Khi sử dụng Promise, lỗi được bắt bằng phương thức 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!"

Khi thực hiện các hoạt động bất đồng bộ bằng async/await, bạn có thể xử lý lỗi bằng 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();

Tóm tắt

  • Bạn có thể bắt lỗi đồng bộ bằng cú pháp try...catch.
  • Bạn có thể ném lỗi của riêng mình bằng throw.
  • Các lỗi trong hoạt động bất đồng bộ có thể được xử lý bằng phương thức catch của Promise, hoặc với async/await và try...catch.

Bằng cách sử dụng các phương pháp này, bạn có thể đảm bảo rằng chương trình của mình hoạt động đúng ngay cả khi xảy ra lỗi.

Error

Lớp Error được sử dụng để xử lý lỗi. Nó cung cấp khả năng tạo lỗi và cung cấp thông báo lỗi cùng với dấu vết ngăn xếp.

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

Cách sử dụng cơ bản

Một đối tượng Error có thể được tạo rõ ràng khi xảy ra lỗi. Bạn tạo một thể hiện với new Error() và truyền vào một thông báo lỗi.

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)

Ném lỗi với từ khóa throw

Trong JavaScript, bạn có thể ném một lỗi bằng cách sử dụng từ khóa throw. Điều này được sử dụng để ngắt xử lý trong các tình huống cụ thể và chuyển quyền kiểm soát sang một trình xử lý lỗi.

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}

Các lỗi được ném ra bằng throw có thể được bắt bằng cú pháp try...catch.

Tạo lỗi tùy chỉnh

Trong JavaScript, bạn có thể tạo lỗi tùy chỉnh của riêng mình bằng cách mở rộng lớp Error. Điều này cho phép bạn tạo các lỗi được thiết kế phù hợp với các tình huống cụ thể.

 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}

Các lớp lỗi tích hợp sẵn

JavaScript có một số lớp lỗi tích hợp sẵn mở rộng từ lớp Error. Các lớp này được sử dụng để biểu diễn các lỗi cụ thể.

  • ReferenceError: Xảy ra khi bạn tham chiếu đến một biến không tồn tại.
  • TypeError: Xảy ra khi kiểu của một giá trị khác với kiểu mong đợi.
  • RangeError: Xảy ra khi một số nằm ngoài khoảng cho phép.
  • SyntaxError: Xảy ra khi mã không đúng cú pháp được thực thi.
  • EvalError: Các lỗi liên quan đến việc sử dụng hàm eval(). Hiện nay nó hiếm khi được sử dụng.
  • URIError: Xảy ra khi một URI không hợp lệ (lỗi mã hóa hoặc giải mã) được sử dụng.
Ví dụ: ReferenceError

Dưới đây là một ví dụ về 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}
Ví dụ: TypeError

Dưới đây là một ví dụ về 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}

Khối finally

Trong cú pháp try...catch, sử dụng khối finally cho các thao tác bạn muốn thực thi bất kể có xảy ra lỗi hay không.

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}

Trong ví dụ này, các thao tác trong khối finally được thực thi ngay cả khi có lỗi xảy ra.

Các thuộc tính của đối tượng Error

Đối tượng Error có các thuộc tính sau.

  • message: Đây là thông báo lỗi.
  • name: Tên của lỗi, mặc định là "Error".
  • stack: Một truy vết stack chứa vị trí lỗi xảy ra, hữu ích cho việc gỡ lỗi.

Lợi ích của việc xử lý ngoại lệ

Bằng cách thực hiện xử lý lỗi đúng cách, bạn có thể ngăn ứng dụng bị sập khi xảy ra hành vi không mong muốn. Bằng cách sử dụng cú pháp try...catch và các đối tượng lỗi một cách phù hợp, bạn có thể viết mã bền vững hơn.

 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}

Tóm tắt

  • Lớp Error được sử dụng để biểu thị nguyên nhân lỗi và xử lý lỗi.
  • Sử dụng cú pháp try...catch...finally để xử lý lỗi và ngăn ứng dụng bị kết thúc bất ngờ.
  • Bạn cũng có thể mở rộng lớp Error để tạo các lỗi tùy chỉnh.
  • Bạn có thể xử lý nhiều loại lỗi khác nhau bằng cách sử dụng các lớp lỗi tích hợp sẵn như TypeError và ReferenceError.

Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.

YouTube Video

Các mô-đun trong JavaScript