Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> JavaScript

JavaScript Try Catch: Hướng dẫn từng bước

Khối try catch của JavaScript là trình xử lý lỗi. Khối "try" chứa mã bạn muốn kiểm tra. "catch" chứa mã sẽ chạy nếu mã trong khối "try" không thực thi thành công.


Khi nhà phát triển kiểm tra chương trình, thường viết mã xử lý lỗi theo cách nhất định. Điều này nhẹ nhàng hơn cho phép chương trình bị sập, gây ra lỗi lập trình xuất hiện. Ví dụ, bạn có thể muốn người dùng thấy thông báo "Vui lòng thử lại sau", thay vì nhật ký lỗi dài.

Đó là lúc khối try/catch xuất hiện. Khối try/catch cho phép xử lý lỗi nhẹ nhàng để vấn đề mã không làm sập toàn bộ chương trình. Trong hướng dẫn này, chúng ta sẽ minh họa cách dùng khối try/catch và thảo luận tại sao chúng hữu ích.

Tóm tắt Xử lý Lỗi

Mọi nhà phát triển đều mắc lỗi trong mã vì có nhiều cách chương trình có thể hỏng.

Khi gặp lỗi trong JavaScript, chương trình thường dừng và in lỗi ra console. Điều này hữu ích vì bạn thấy gì sai, nhưng người dùng gặp lỗi khó hiểu.

Đó là lý do quan trọng phải bao gồm thủ tục xử lý lỗi trong mã. Bằng cách bao gồm trình xử lý lỗi, bạn tùy chỉnh cách chương trình phản hồi khi gặp lỗi. Do đó, trình xử lý lỗi cho phép quyết định thông báo người dùng thấy khi gặp lỗi, hoặc cách bạn được thông báo vấn đề.

JavaScript try catch

Khối try catch JavaScript xác định lỗi trong khối mã chỉ định. Nội dung khối "catch" chạy nếu có lỗi trong mã khối "try". Bạn cũng có thể dùng khối "finally" chạy mã dù chương trình thực thi thành công hay không.

Đây là cú pháp thủ tục try/catch:

81% người tham gia cho biết họ cảm thấy tự tin hơn về cơ hội việc làm công nghệ sau khi tham gia bootcamp. Được ghép nối với bootcamp ngay hôm nay.

Sinh viên trung bình của bootcamp dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được việc đầu tiên.

try {
  // Mã của bạn ở đây
  console.log("Mã hoạt động!");
} catch (e) {
  console.log("Có vấn đề trong mã!");
}

Có hai câu lệnh trong khối:

  • try {}.
  • catch (e) {}.

Mã bao trong câu lệnh "try" là gì chương trình sẽ cố chạy. Trong trường hợp này, chương trình cố in "Mã này hoạt động" ra console. Mã bao trong câu lệnh catch chạy nếu và khi lỗi được trả về trong câu lệnh try.

Giá trị (e) trong câu lệnh catch đại diện cho lỗi khiến mã trong câu lệnh "try" thất bại. Bạn có thể quyết định in giá trị "e" để thấy nguyên nhân gốc rễ của lỗi dừng mã.

Ví dụ try catch JavaScript

Để minh họa khối try/catch hoạt động, hãy dùng ví dụ. Trong ví dụ dưới, ta viết sai tên biến JavaScript trong mã.

let ourVariable = "Test";
console.log(ourVarible);

Mã trả về:

ReferenceError: ourVarible is not defined

Đây là lỗi mặc định trả về khi biến không tìm thấy. Nhưng nếu người dùng thấy lỗi này? Họ có thể bối rối. Bây giờ thử mã với khối try/catch:

let ourVariable = "Test";
try {
  console.log(ourVarible);
} catch (e) {
  console.log("Có vấn đề!")
}

Mã trả về:

Có vấn đề!

Mã chứa cùng ReferenceError như trên. Thay vì trả về lỗi mặc định dài và phức tạp, chương trình trả về nội dung ta chỉ định trong khối catch. Mã ghi lỗi, nhưng trả về lỗi tùy chỉnh.

Khối catch theo dõi lỗi trong đối số "e". Nếu muốn, ta vẫn truy cập lỗi được trả về. Đây là ví dụ chương trình trả về giá trị "e":

let ourVariable = "Test";
try {
  console.log(ourVarible);
} catch (e) {
  console.log("Có vấn đề! Đây là thông báo lỗi từ mã:", e)
}

Mã trả về sau:

Có vấn đề! Đây là thông báo lỗi từ mã: ReferenceError: ourVarible is not defined.

Bây giờ mã báo cáo lỗi cho ta và cũng hiển thị thông báo lỗi ném ra bởi chương trình.

Đáng chú ý rằng mệnh đề catch là tùy chọn. Nếu muốn chương trình không làm gì khi gặp lỗi, chỉ cần bao mã trong khối try.

Mệnh đề JavaScript try catch finally

Còn một mệnh đề thêm cho mã: finally. Finally, là mệnh đề tùy chọn như catch, cho phép chạy mã ngay cả khi gặp lỗi. Đây là ví dụ mệnh đề try/catch/finally hoạt động:

let ourVariable = "Test";
try {
  console.log(ourVarible);
} catch (e) {
  console.log("Có vấn đề! Đây là thông báo lỗi từ mã:", e)
} finally {
  console.log("Mã đã chạy!")
}

Đây là gì chương trình trả về:

TypeError: Your variable is not a string! The code has been run!

Mã gặp lỗi nên mã trong mệnh đề catch chạy. Trả về TypeError thấy ở trên. Sau khi lỗi được xử lý, mã trong khối finally chạy, in ra Mã đã chạy!



Kết luận

Bạn có thể dùng mệnh đề try/catch JavaScript để kiểm tra mã. Nội dung câu lệnh catch sẽ chạy nếu câu lệnh try không thực thi thành công. Câu lệnh finally thực thi ngay sau câu lệnh try hoặc catch.

Nếu phát triển trang web người dùng thấy, có lỗi tùy chỉnh hữu ích. Lỗi tùy chỉnh đảm bảo người dùng không bối rối khi có sự cố.

Bạn muốn học thêm về lập trình JavaScript? Đọc hướng dẫn Cách học JavaScript. Hướng dẫn chứa lời khuyên hàng đầu về cách học JavaScript.