Xử lý ngoại lệ trong javascript – Thầy Long Web

Posted on by mtoplistChuyên mục:Top List

Xử lý ngoại lệ trong javascript tức là kiểm soát các lỗi có thể phát sinh trong quá trình code javascript thực thi.

Các lỗi do dữ liệu không hợp lệ, không tồn tại các đối tượng triệu gọi và nhiều lỗi khác…khi xảy ra sẽ được xử lý, hiển thị thông báo thân thiện nếu bạn biết cách bắt lỗi và xử lý.

1. Xử lý ngoại lệ trong javascript

Javascript có cấu trúc try – catch – finally giúp bạn quản lý các lỗi có thể phát sinh trong quá trình code code javascript thực thi. Cú pháp như sau:

try {
  //Code được quản lý lỗi, nếu có lỗi trong vùng này thì trình 
  // duyệt sẽ nhảy vào khối catch
}
catch(err) {
  //khối lệnh ở đây sẽ chạy khi có lỗi xảy ra trong vùng try
}
finally {
  Khối code thực thi sau cùng , dù có lỗi hay không
}

2. Sử dụng try – catch – finally

Khi muốn bắt lỗi trong javascript bạn thực hiện như sau:

  • Dùng try để bao lấy các lệnh xử lý nghiệp vụ
  • Dùng catch để bao lấy các lệnh sẽ xử lý khi có lỗi xảy ra trên vùng try, ví dụ như hiện thông báo hay chuyển qua trang khác…
  • Dùng finally để bao lấy các lệnh được chạy sau khi kết thúc các mệnh đề try – catch, bất kể có ngoại lệ xảy ra hay không. Tuy nhiên phần finally này có thể bỏ qua nếu bạn không cần dùng.

Sau đây là ví dụ 1 về dùng try catch để bắt lỗi và hiển thị lỗi ra trang web

<p id="thongbao"></p>
<h2>Những mảng công việc sinh viên ngành web có thể làm</h2>
<script>
try {
  document.write("<p>Lập trình website</p>");    
  document.wrote("<p>Vận hành website</p>"); 
  document.write("<p>Phát triển website</p>");
 } 
 catch(err){
   document.getElementById("thongbao").innerHTML="Lỗi nè:"+ err.message;
 }
</script>

3. Dùng lệnh throw khi bắt lỗi

Khi xử lý ngoại lệ trong javascript , bạn có thể dùng lệnh throw . Lệnh này cho phép bạn tạo ra 1 lỗi với nội dung thân thiện theo ý muốn. Nội dung lỗi có thể là 1 string, 1 số, boolean hoặc 1 object. Ví dụ : 

throw "Điểm lớn dữ vậy bạn"; // tạo lỗi với nội dung là string
throw 500;                  // tạo lỗi với nội dung là số

Sau đây là ví dụ 2 về cách dùng try … cach với lệnh throw

<body>
    <h4>Nhập tuổi từ 6 đến 18:</h4> <input id="tuoi"> 
    <button type="button" onclick="tinh()"> &nbsp;  OK &nbsp; </button>
    <div id="msgTuoi" style="color:red"></div>
</body>
<script>
function tinh() {      
    msg = document.getElementById("msgTuoi");
    msg.innerText = "";
    t = document.getElementById("tuoi").value;
    try { 
        if(t == "")  throw "Sao không nhập tuổi vậy trời";
        if(isNaN(t)) throw "Trời ơi! Tuổi mà sao nhập chữ?";
        t = Number(t);
        if(t < 6)  throw "Tuổi nhỏ quá, nhập lại đi";
        if(t > 18)   throw "Tuổi lớn vậy! Nhặp lại nhé";
    }
    catch(err) {
        msg.innerHTML = "Lỗi: " + err;
    }
}
</script>

Ví dụ 3: Dùng finally 

<body>
    <h4>Nhập tuổi từ 6 đến 18:</h4> <input id="tuoi"> 
    <button type="button" onclick="tinh()"> &nbsp;  OK &nbsp; </button>
    <div id="msgTuoi" style="color:red"></div>
</body>
<script>
function tinh() {      
    try { 
        t = document.getElementById("tuoi").value;
        if(t == "")  throw "Sao không nhập tuổi vậy trời";
        if(isNaN(t)) throw "Trời ơi! Tuổi mà sao nhập chữ?";
        if(Number(t) < 6)  throw "Tuổi nhỏ quá, nhập lại đi";
        if(Number(t) > 18)   throw "Tuổi lớn vậy! Nhặp lại nhé";
        document.getElementById("msgTuoi").innerHTML = "OK Thanks you";
    }
    catch(err) {  document.getElementById("msgTuoi").innerHTML = err; }
    finally {
        document.getElementById("tuoi").focus();
        //document.getElementById("tuoi").select();
    }
}
</script>

4. Đối tượng Error

Trong JavaScript có sẵn đối tượng Error chứa các thông tin về lỗi vừa xảy ra. Bạn có thể dùng đối tượng này trong tham số của phần catch. Đối tượng error có 2 thuộc tính name và message . Name là tên (loại) lỗi còn message là nội dung lỗi.

PropertyDescriptionnameTên lỗimessageNội dung lỗi

Các tên (loại) lỗi trong error

Các giá trị (loại lỗi) trong thuộc tính name có thể có:

Error NameDescriptionRangeErrorMột giá trị số đã bị “out of range”ReferenceErrorLỗi reference, ví dụ tham chiếu đến 1 biến chưa khai báo. var x=y+1; (mà y chưa có) SyntaxErrorLỗi cú pháp lệnhTypeErrorLỗi về kiểu dữ liệu. Ví dụ : var n=1; n.toUpperCase(); URIErrorLỗi liên quan đến việc xử lý địa chỉ url trong javascript

<body>
    <h4>Nhập tuổi từ 6 đến 18:</h4> <input id="tuoi"> 
    <button type="button" onclick="tinh()"> &nbsp;  OK &nbsp; </button>
    <div id="msgTuoi" style="color:red"></div>
</body>
<script>
function tinh() {      
    try { 
        t = document.getElementById("tuoi").value;
        if(t == "")  throw {'name':'Không nhập dữ liệu','message':"Sao không nhập tuổi vậy trời"} ;
        if(isNaN(t)) throw {'name':'Nhập không đúng kiểu','message':"Trời ơi! Tuổi mà sao nhập chữ?"};
        if(Number(t) < 6)  throw {'name':'Giá trị quá nhỏ', 'message':"Tuổi nhỏ quá, nhập lại đi"};
        if(Number(t) > 18) throw {'name':'Giá trị quá lớn','message':"Tuổi lớn vậy! Nhặp lại nhé"};
        t=eval("sds") +2;
        document.getElementById("msgTuoi").innerHTML = "OK Thanks you";
    }
    catch(err) {  
        document.getElementById("msgTuoi").innerHTML = 
        err.name + '<br>' + err.message; 
        console.log(err.name);
    }
    finally {
        document.getElementById("tuoi").focus();
    }
}
</script>

Cần tham khảo thệm thì xem ở đây: https://www.w3schools.com/js/js_errors.asp

mtoplist