Các lệnh xử lý lỗi trong JavaScript

TẠI SAO PHẢI XỬ LÝ LỖI?

Đôi khi code JavaScript của bạn chạy không mượt mà như mong đợi, dẫn đến LỖI.

Có một số lý do có thể gây ra lỗi, ví dụ:

Sự cố với kết nối mạng
Người dùng có thể đã nhập giá trị không hợp lệ trong trường biểu mẫu
Tham chiếu đến các đối tượng hoặc hàm không tồn tại
Dữ liệu được gửi đến hoặc nhận từ máy chủ web không chính xác
Một dịch vụ mà ứng dụng cần truy cập có thể tạm thời không khả dụng

JavaScript cung cấp cho ta bốn loại lệnh dùng để kiểm soát và xử lý lỗi: try, catch, throw, finally

1. Lệnh “try” và “catch” trong JavaScript

Khi thực thi một đoạn mã JavaScript, nếu một câu lệnh nào đó bị lỗi thì việc thực thi sẽ kết thúc

Từ đây, lệnh try giúp chúng ta tránh tình trạng này.

– Lệnh try được dùng để kiểm tra (thực thi) một đoạn mã, nếu đoạn mã đó có chứa câu lệnh bị lỗi thì những câu lệnh nằm phía sau câu lệnh bị lỗi sẽ không được thực thi. Tuy nhiên, những câu lệnh nằm ngoài lệnh try thì vẫn thực thi bình thường.

– Lệnh try cần phải sử dụng kèm với lệnh catch hoặc lệnh finally

(Nhưng thông thường thì lệnh try được sử dụng chung với lệnh catch nhiều hơn)

– Lệnh catch dùng để xác định một đoạn mã và đoạn mã đó sẽ được thực thi nếu đoạn mã bên trong lệnh try có chứa câu lệnh bị lỗi (Điều đó đồng nghĩa với việc: nếu đoạn mã bên trong lệnh try không chứa câu lệnh bị lỗi thì đoạn mã bên trong lệnh catch sẽ không được thực thi).

Cú pháp:

try {
      // Code có thể gặp lỗi nào đó
}
catch(err) {
     // Code xử lý khi lỗi xảy ra
}

Ví dụ:

<html>
    <body>
        <p id="”demo”"></p>
        <script>
            try {
            adddlert(“Welcome guest!”);
            }
            catch(err) {
            document.getElementById(“demo”).innerHTML = err.message;
            }
        </script>
    </body>
</html>

Lưu ý: Lệnh catch phải có một tham số (điển hình ví dụ trên là tham số err), tham số này dùng để lưu trữ một đối tượng, đối tượng này chứa các thông tin về lỗi của câu lệnh bị lỗi trong lệnh try.

2. Lệnh “throw” trong JavaScript

– Lệnh throw thường được đặt bên trong lệnh try

– Lệnh throw có chức năng ném ra một lỗi (hoặc cũng có thể nói là tạo ra một lỗi)

– Lưu ý: Sau khi lệnh throw “được thực thi” thì một lỗi sẽ được tạo ra, điều đó cũng đồng nghĩa với việc câu lệnh bị lỗi. Do đó, những câu lệnh còn lại nằm phía sau lệnh throw sẽ không được thực thi.

Ví dụ:

Ví dụ này kiểm tra đầu vào. Nếu giá trị là sai, một ngoại lệ (err) được ném ra. Ngoại lệ (err) được tóm bởi lệnh catch và một thông báo lỗi tùy chỉnh được hiển thị:

<script>
    try{
        document.write("<p>Tài liệu học HTML</p>");
        throw "Chất lượng bài viết chưa được tối ưu";
        document.write("<p>Tài liệu học CSS</p>");
        document.write("<p>Tài liệu học JavaScript</p>");
    }catch(err){
        document.write("THÔNG TIN LỖI: " + err);
    }
</script>

3. Lệnh “finally” trong JavaScript

– Lệnh finally thường được đặt phía sau lệnh try hoặc try … catch

– Lệnh finally dùng để thực thi một đoạn mã mặc định
(mặc cho đoạn mã bên trong lệnh try có chứa câu lệnh bị lỗi hay không)

<script>
    function KiemTraDuLieu() {
        document.getElementById("demo").innerHTML = "";
        var number = document.getElementById("number").value;
        try {
            if (number == "") {
                throw "Bạn chưa nhập giá trị";
            } else if (isNaN(number)) {
                throw "Giá trị bạn nhập không phải là một số";
            } else if (number < 1) {
                throw "Giá trị vừa nhập nhỏ hơn giá trị cho phép";
            } else if (number > 10) {
                throw "Giá trị vừa nhập lớn hơn giá trị cho phép";
            }
            document.getElementById("demo").innerHTML = "Hợp lệ";
        } catch (err) {
            document.getElementById("demo").innerHTML = err;
        } finally {
            document.getElementById("number").value = "";
        }
    }
</script>

Ref: https://webcoban.vn/javascript/xu-ly-loi-trong-javascript.html

Xem thêm: Destructuring assignment