JavaScript: JavaScript try…catch

Giới thiệu câu lệnh try…catch trong JavaScript

Đoạn mã sau cố gắng gọi hàm add() không tồn tại:

let result = add(10, 20);
console.log(result);

console.log('Bye')

Và JavaScript engine phát sinh lỗi sau:

Uncaught TypeError: add is not a function

Thông báo lỗi cho biết add không phải là một hàm và loại lỗi là TypeError.

Khi JavaScript engine gặp lỗi, nó sẽ báo lỗi đó và ngay lập tức chấm dứt việc thực thi toàn bộ tập lệnh. Trong ví dụ trên, việc thực thi mã dừng ở dòng đầu tiên.

Đôi khi, bạn muốn xử lý lỗi và tiếp tục thực thi. Để làm điều đó, bạn sử dụng câu lệnh try...catch với cú pháp sau:

try {
  // code may cause error
} catch(error){
  // code to handle error
}

Trong cú pháp này:

• Đầu tiên, đặt mã có thể gây ra lỗi trong khối try.
• Thứ hai, triển khai logic để xử lý lỗi có thể gặp phải trong khối catch.

Nếu xảy ra lỗi trong khối try, JavaScript engine sẽ ngay lập tức thực thi mã trong khối catch. Ngoài ra, JavaScript engine còn cung cấp cho bạn một đối tượng error chứa thông tin chi tiết về lỗi.

Về cơ bản, đối tượng error có ít nhất hai thuộc tính:

• name chỉ định tên lỗi.
• message giải thích lỗi một cách chi tiết.

Nếu không có lỗi xảy ra trong khối try, JavaScript engine sẽ bỏ qua khối catch.

Trình duyệt web có thể thêm nhiều thuộc tính hơn cho đối tượng error. Ví dụ: Firefox thêm các thuộc tính filename, lineNumber, và stack vào đối tượng error.

Cách tốt nhất là chỉ đặt mã có thể gây ra ngoại lệ trong khối try.

Lưu đồ sau đây minh họa cách try...catch hoạt động:

Ví dụ về câu lệnh try…catch trong JavaScript

Ví dụ sau sử dụng câu lệnh try...catch để xử lý lỗi:

try {
  let result = add(10, 20);
  console.log(result);
} catch (e) {
  console.log({ name: e.name, message: e.message });
}
console.log('Bye');

Output

{name: 'TypeError', message: 'add is not a function'}
Bye

Trong ví dụ này, chúng ta gọi hàm add() và gán giá trị trả về cho biến result. Vì hàm add() này không tồn tại nên JavaScript engine bỏ qua câu lệnh xuất kết quả ra console:

console.log(result);

Và nó ngay lập tức thực thi câu lệnh trong khối catch, xuất ra tên và thông báo lỗi:

console.log({ name: e.name, message: e.message });

Vì chúng ta đã xử lý lỗi nên JavaScript engine tiếp tục thực thi câu lệnh cuối cùng:

console.log('Bye');

Ví dụ về bỏ qua khối catch

Ví dụ sau định nghĩa hàm add() trả về tổng của hai số:

const add = (x, y) => x + y;

try {
  let result = add(10, 20);
  console.log(result);
} catch (e) {
  console.log({ name: e.name, message: e.message });
}
console.log('Bye');

Output

30
Bye

Trong ví dụ trên, không có lỗi xảy ra vì hàm add() đã được định nghĩa. Do đó, JavaScript engine bỏ qua khối catch.

Định nghĩa exception

Khi một ngoại lệ xảy ra trong khối try, biến exception (e) trong khối catch sẽ lưu trữ đối tượng exception.

Nếu bạn không muốn sử dụng biến exception, bạn có thể bỏ qua nó như thế này:

try {
  //...
} catch {
  //...
}

Ví dụ: đoạn mã sau sử dụng câu lệnh try…catch không có biến exception:

const isValidJSON = (str) => {
  try {
    JSON.parse(str);
    return true;
  } catch {
    return false;
  }
};

let valid = isValidJSON(`{"language":"JavaScript"}`);
console.log(valid);

Đầu tiên, xác định hàm isValidJSON() chấp nhận một chuỗi và trả về true nếu chuỗi đó là JSON hợp lệ hoặc false nếu ngược lại.

Để xác thực JSON hợp lệ, hàm isValidJSON() sử dụng phương thức JSON.parse() và câu lệnh try...catch.

Phương thức JSON.parse() phân tích chuỗi JSON và trả về một đối tượng. Nếu chuỗi đầu vào không phải là JSON hợp lệ thì sẽ JSON.parse() đưa ra một exception.

Nếu không có exception xảy ra, hàm sẽ trả về true trong khối try. Nếu không, nó sẽ trả về false trong khối catch.

Thứ hai, gọi hàm isValidJSON() và truyền một chuỗi JSON vào đó:

let valid = isValidJSON(`{"language":"JavaScript"}`);

Vì chuỗi đầu vào có định dạng JSON hợp lệ nên hàm trả về true.

Thứ ba, xuất ra result ra console:

console.log(valid);

Tổng kết

• Sử dụng câu lệnh try...catch để xử lý các exception (ngoại lệ) trong JavaScript.
• Chỉ đặt mã có thể gây ra exeption trong khối try.