1. Try Catch trong JavaScript là gì?

Try catch là một khối lệnh dùng để bắt lỗi chương trình trong Js. Ta sử dụng try catch khi muốn chương trình không bị dừng khi một lệnh nào đó bị lỗi. Thường thì đó là những lỗi do người dùng nhập sai dữ liệu, hoặc người dùng thao tác bị sai.

Trong quá trình lập trình web, chắc hẳn sẽ có những lúc chương trình bạn làm ra bị dừng lại vì xảy ra lỗi trong code mình làm. Những lỗi này được gọi là Ngoại lệ (Exception) trong Js.

2. Đối tượng Error trong JavaScript

Khi chương trình chạy bị lỗi nó sẽ ném ra đối tượng là Error cho mình. Trong đối tượng Error có 2 thuộc tính là name (tên của lỗi) và message (nội dung của lỗi). Chúng ta sử dụng try catch để bắt lại đối tượng Error này. Tuỳ vào nội dung của lỗi là gì mà chúng ta xử lý.

3. Cú pháp lệnh Try Catch trong JavaScript

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 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).

Chú ý

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

Cú pháp:

try {
    // Quăng lỗi ra
    throw("Noi dung loi");  
} catch (error){
    // Đón nhận lỗi và in ra
    // Vị trí này chỉ chạy khi ở try có quăng lỗi hoặc ở try 
    // sử dụng sai cú pháp ...
    document.write(e.message);
} finally{
    // Cuối cùng chạy cái này luôn chạy sau cùng
 
    console.log('End of try catch');
}

Ta sẽ hiểu nôm na các bước như sau:

• Thực hiện trong try
• Nếu trong try xuất hiện lỗi thì nhảy sang catch
• Cuối cùng nhảy xuống finally dù là lỗi hay không

Như mình đã lưu ý thì finally luôn thực thi cuối cùng. Finally cũng là tùy chọn và có thể có hoặc không. Riêng trong catch sẽ có một tham số truyền vào, tham số này chính là một trong những đối tượng lỗi mà mình đã giới thiệu.

Ví dụ:

<script>
try{
    var a= ["34","32","5","31","24","44","67"]; //a là một mảng
    document.write(a);    // hiển thị các phần tử của a
    document.write(b); //b là không xác định nhưng vẫn đang cố gắng lấy giá trị của nó. Do đó khối bắt sẽ được gọi
}catch(e){
    alert("Có lỗi hiển thị "+e.message); //Xử lý lỗi
}
</script>

4. Sử dụng Throw ném ngoại lệ

Sẽ có những trường hợp trong function của mình muốn ném ra một ngoại lệ để các function khác khi gọi nó có thể bắt ngoại lệ và xử lý tiếp. Để function ném ra ngoại lệ thì ta dùng từ khóa Throw .

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

Chú ý

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ụ:

<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>

Hay

<p>Nhập một số có giá trị trong khoảng từ 1 đến 10</p>

   <input type="text" id="number">

   <button type="button" onclick="KiemTraDuLieu()">Kiểm tra</button>

   <p id="demo"></p>

   <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;
           }
       }
   </script>

5. Lệnh finally trong JavaScript

Khối lệnh finally là trường hợp đặc biệt ta có thể dùng hoặc không dùng chung với try catch. Khối lệnh finally luôn luôn chạy các dòng code trong nó dù ngoại lệ có được ném ra hay không.

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

Ví dụ:

<p>Nhập một số có giá trị trong khoảng từ 1 đến 10</p>

<input type="text" id="number">

<button type="button" onclick="KiemTraDuLieu()">Kiểm tra</button>

<p id="demo"></p>

<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>

6. Một số lỗi trong JavaScript

Như đã nói ở trên, Js có một đối tượng lỗi được tích hợp sẵn để cung cấp thông tin lỗi mà bạn có thể truy cập thông qua biến đại diện ex (người ta hay dùng từ err). Lệnh catch bao giờ cũng bắt buộc phải có một tham số, tham số này dùng để lưu trữ một đối tượng và đối tượng này sẽ chứa các thông tin về lỗi của câu lệnh bị lỗi trong lệnh try.

Những trường hợp lỗi thường gặp như:

6.1. Lỗi ReferenceError

ReferenceError xảy ra khi ta sử dụng một biến chưa được khai báo.

<script>
    try{
        document.write(text);
    }catch(err){
        document.write(err);
        document.write("<br>");
        document.write("Loại lỗi: " + err.name);
        document.write("<br>");
        document.write("Thông báo lỗi: " + err.message);
    }
</script>

6.2. Lỗi URIError

URIError xảy ra khi ta sử dụng các ký tự không hợp lệ trong các hàm xử lý URI.

<script>
       try{
           var a = decodeURI("%%%");
       }catch(err){
           document.write(err);
           document.write("<br>");
           document.write("Loại lỗi: " + err.name);
           document.write("<br>");
           document.write("Thông báo lỗi: " + err.message);
       }
   </script>

6.3. Lỗi TypeError

TypeError xảy ra khi ta sử dụng các giá trị có kiểu dữ liệu nằm ngoài mong đợi.

<script>
    try{
        var numb = 1;
        numb.toUpperCase();
    }catch(err){
        document.write(err);
        document.write("<br>");
        document.write("Loại lỗi: " + err.name);
        document.write("<br>");
        document.write("Thông báo lỗi: " + err.message);
    }
</script>

6.4. Lỗi RangeError

RangeError xảy ra khi ta sử dụng một tham số có giá trị nằm ngoài phạm vị giá trị cho phép.

<script>
    try{
        var numb = 12.4514;
        numb.toPrecision(500);
    }catch(err){
        document.write(err);
        document.write("<br>");
        document.write("Loại lỗi: " + err.name);
        document.write("<br>");
        document.write("Thông báo lỗi: " + err.message);
    }
</script>

6.5. Lỗi SyntaxError

SyntaxError xảy ra khi câu lệnh bị sai cú pháp.

<script>
    try{
        eval("alert('Lập Trình Web)");
    }catch(err){
        document.write(err);
        document.write("<br>");
        document.write("Loại lỗi: " + err.name);
        document.write("<br>");
        document.write("Thông báo lỗi: " + err.message);
    }
</script>