Kỹ thuật xử lý lỗi trong JavaScript

Error Handling trong JavaScript

Trong hầu hết các trường hợp, không một lập trình viên nào thích sự xuất hiện của lỗi trong chương trình, tuy vậy lỗi lại là một phần không thể thiếu trong lập trình. Chính vì vậy việc xử lý lỗi trong lập trình là một điều hết sức cần thiết.

Trong JavaScript, khi logic của các câu lệnh trog chương trình có mối liên hệ chặt chẽ với nhau và có một lỗi nào đó xuất hiện thì việc tiếp tục thực thi với các câu lệnh còn lại là vô nghĩa. Thay vào đó, chúng ta cần xử lý lỗi có thể gặp phải thông qua câu lệnh xử lý ngoại lệ hay exception handling statement.

Một trong những cách phổ biến để xử lý lỗi trong JavaScript đó là thông qua khối lệnh try...catch block như sau:

const userData = '{"name": "John Doe", "age": 24';

try {
  var user = JSON.parse(userData)
  console.log(user);
} catch (error) {
  console.log(error.message);
}

Đoạn code trên do giá trị của hằng userData không phải là một chuỗi JSON hợp lệ nên câu lệnh trong khối lệnh catch sẽ được thực thi và trình thông dịch JavaScript sẽ hiển thị thông báo lỗi.

Bắt Các Lỗi Chưa Được Xử Lý

Trường hợp bạn không chắc chắn rằng tất cả các lỗi xuất hiện của chương trình đã được xử lý thì bạn có thể sử dụng phương thức window.onerror() để bắt các lỗi này:

window.addEventListener('error', function(event) {console.log("Lỗi chưa được xử lý!") });
throw new Error('Test error');

Xử Lý Lỗi Trên Phần Tử DOM

Với các phần tử DOM, bạn còn có thể sử dụng một cách khác để xử lý lỗi gặp phải đó là thông qua method onerror() của đối tượng window:

<img src="/img/missing.gif" onerror="alert('Image not found')">

Trường hợp bạn thêm ảnh vào trang thông qua script:

var myImage = new Image(100, 200);
myImage.src = 'picture.jpg';

myImage. addEventListener('error', function () {
    alert('Image not found');
});

Xử Lý Lỗi Bất Đồng Bộ

Đối với các đoạn mã chạy theo kiểu bất đồng bộ chúng ta sẽ xử lý lỗi thông qua hàm callback.

Một trong những ví dụ phổ biến đó là khi bạn gửi ajax request tới một trang nào đó:

$.ajax({
    url: 'http://www.example.net',
    error: function() {
        // code xử lý lỗi...
    }
}); 

Trên đây là một số chia sẻ về cách thức xử lý lỗi trong JavaScript, nếu bạn thẫy hữu ích hãy giúp chúng tôi chia sẻ bài viết trên Facebook hoặc các trang mạng xã hội khác.

Nội dung không được để trống

Bài Viết Liên Quan