By GokiSoft.Com| 10:13 19/05/2020|
Tài Liệu Javascript

JavaScript Errors - Throw and Try to Catch


Câu lệnh try cho phép bạn kiểm tra lỗi cho một khối code.

Câu lệnh catch cho phép bạn xử lý lỗi.

Câu lệnh  throw  cho phép bạn tạo các lỗi tùy chỉnh.

Câu lệnh finally cho phép bạn thực thi code, sau try catch, bất kể kết quả.


Các lỗi sẽ xảy ra!


Khi thực thi JavaScript code, các lỗi khác nhau có thể xảy ra.

Các lỗi có thể là các lỗi được code làm bởi các lập trình viên, các lỗi xảy ra do nhập sai, và các thứ không thể thấy khác.

ví dụ

Trong ví dụ này chúng ta đã viết một cảnh báo bằng adddlert để cố tình tạo ra một lỗi:

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

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

<h2>JavaScript Error Handling</h2>

<p>This example demonstrates how to use <b>catch</b> to diplay an error.</p>

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

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

</body>
</html>

Tip: JavaScript bắt adddlert  như một lỗi, và thực thi lệnh catch để xử lý nó.


JavaScript try và catch


Câu lệnh try try cho phép bạn xác định một khối code sẽ được thử nghiệm lỗi khi nó đang thực thi.

Câu lệnh catch cho phép bạn xác định một khối code sẽ được thực thi, nếu một lỗi xảy ra trong khối try.

Các câu lệnh JavaScript  try và catch đi theo cặp:

try {
  Block of code to try
}
catch(err) {
  Block of code to handle errors
}


JavaScript Throws Errors


Khi một lỗi xảy ra, JavaScript sẽ dừng một cách bình thường và sinh một thông điệp lỗi.

Thuật ngữ kĩ thuật cho việc này là: JavaScript sẽ throw an exception(ném một ngoại lệ) (throw an error -  ném một lỗi).

Tip: JavaScript sẽ thực sự tạo một đối tượng Error với hai thuộc tính: gồm tên(name) và thông điệp(message).


Cú pháp throw(The throw Statement)


Cú pháp throw cho phép bạn tạo một lỗi tùy chọn.

Về mặt kĩ thuật bạn có thể throw một exception (ném một lỗi).

Exception có thể là một JavaScript String, một Number, một Boolean hay một Object:

throw "Too big";    // throw a text
throw 500;          // throw a number


Nếu bạn dùng throw cùng với try và catch, bạn có thể điều khiển luồng chương trình và sinh ra một thông điệp lỗi tùy chọn.


Ví dụ hợp lệ hóa nhập vào(Input Validation Example)


Đây là một ví dụ kiểm tra nhập vào. Nếu giá trị sai, một exception (err) được ném.

Exception (err) được bắt bởi câu lệnh catch và một thông điệp lỗi tùy chọn được hiển thị:

<!DOCTYPE html>
<html>
<body>

<p>Please input a number between 5 and 10:</p>

<input id="demo" type="text">
<button type="button" onclick="myFunction()">Test Input</button>
<p id="p01"></p>

<script>
function myFunction() {
  var message, x;
  message = document.getElementById("p01");
  message.innerHTML = "";
  x = document.getElementById("demo").value;
  try {
    if(x == "") throw "empty";
    if(isNaN(x)) throw "not a number";
    x = Number(x);
    if(x < 5) throw "too low";
    if(x > 10) throw "too high";
  }
  catch(err) {
    message.innerHTML = "Input is " + err;
  }
}
</script>

</body>
</html>


Hợp lệ hóa trong HTML(HTML Validation)


Dòng code bên trên chỉ là một ví dụ.

Các trình duyệt hiện đại thường dùng một kết hợp của JavaScript và validation xây trong HTML, sử dụng các quy tắc xác thực được xác định trước trong các thuộc tính HTML:

<input id="demo" type="number" min="5" max="10" step="1">


Bạn có thể đọc nhiều hơn về validation trong chương sau.


Câu lệnh finally(The finally Statement)


Câu lệnh finally cho phép bạn thực thi code, sau try và catch, bất kể kết quả:

Cú pháp

try {
  Block of code to try
}
catch(err) {
  Block of code to handle errors
}
finally {
  Block of code to be executed regardless of the try / catch result
}


ví dụ

function myFunction() {
  var message, x;
  message = document.getElementById("p01");
  message.innerHTML = "";
  x = document.getElementById("demo").value;
  try {
    if(x == "") throw "is empty";
    if(isNaN(x)) throw "is not a number";
    x = Number(x);
    if(x > 10) throw "is too high";
    if(x < 5) throw "is too low";
  }
  catch(err) {
    message.innerHTML = "Error: " + err + ".";
  }
  finally {
    document.getElementById("demo").value = "";
  }
}
<!DOCTYPE html>
<html>
<body>

<p>Please input a number between 5 and 10:</p>

<input id="demo" type="text">
<button type="button" onclick="myFunction()">Test Input</button>

<p id="p01"></p>

<script>
function myFunction() {
  var message, x;
  message = document.getElementById("p01");
  message.innerHTML = "";
  x = document.getElementById("demo").value;
  try { 
    if(x == "")  throw "is empty";
    if(isNaN(x)) throw "is not a number";
    x = Number(x);
    if(x > 10)   throw "is too high";
    if(x < 5)  throw "is too low";
  }
  catch(err) {
    message.innerHTML = "Input " + err;
  }
  finally {
    document.getElementById("demo").value = "";
  }
}
</script>

</body>
</html>


Đối tượng Error(The Error Object)


JavaScript có một đối tượng error xây dựng bên trong cung cấp thông tin lỗi khi một lỗi xảy ra.

Đối tượng error cung cấp hai thuộc tính hữu dụng: tên(name) và thông điệp(message).


Các thuộc tính của đối tượng Error(Error Object Properties)


Thuộc tínhMô tả
nameĐặt hoặc trả về một tên lỗi
messageĐặt hoặc trả một thông điệp lỗi (một chuỗi)


Các giá trị tên lỗi(Error Name Values)


Sáu giá trị khác nhau có thể trả về bởi thuộc tính tên lỗi:

Tên lỗiMô tả
EvalErrorMột lỗi đã xảy ra trong hàm eval()
RangeErrorMột số "ngoài phạm vi" đã xảy ra
ReferenceErrorMột tham chiếu không hợp lệ đã xảy
SyntaxErrorMột lỗi cú pháp đã xảy ra
TypeErrorMột lỗi về kiểu đã xảy ra
URIErrorMột lỗi trong encodeURI() đã xảy ra

Sáu giá trị khác nhau được thể hiện bên dưới.


Eval Error


Một EvalError chỉ ra một lỗi trong hàm eval().

Phiên bản mới hơn của JavaScript không throw EvalError. Dùng SyntaxError thay thế.


Range Error


Một RangeError được throw nếu bạn dùng một số nằm ngoài phạm vi của giá trị hợp lệ.

Ví dụ: Bạn không thể đặt số chữ số có nghĩa của một số thành 500.

ví dụ

var num = 1;
try {
  num.toPrecision(500);   // A number cannot have 500 significant digits
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}
<html>
<body>

<h2>JavaScript Errors</h2>

<p>You cannot set the number of significant digits of a number to 500:</p>

<p id="demo">

<script>
var num = 1;
try {
  num.toPrecision(500);
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}
</script>

</body>
</html>


Reference Error


Một ReferenceError được thrown nếu bạn dùng (tham chiếu) một biến chưa được khai báo:

ví dụ

var x;
try {
  x = y + 1;   // y cannot be referenced (used)
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Errors</h2>

<p>You cannot use the value of a non-existing variable:</p>

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

<script>
var x;
try {
  x = y + 1;
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}
</script>

</body>
</html>


Syntax Error


Một SyntaxError được thrown nếu bạn cố gắng dự tính code với một lỗi cú pháp.

ví dụ

try {
  eval("alert('Hello)");   // Missing ' will produce an error
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Errors</h2>

<p>You cannot evaluate code that contains a syntax error:</p>

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

<script>
try {
  eval("alert('Hello)");
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}
</script>

</body>
</html>


Type Error


Một TypeError được throw nếu bạn dùng một giá trị ngoài phạm vi của kiểu dự kiến:

ví dụ

var num = 1;
try {
  num.toUpperCase();   // You cannot convert a number to upper case
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Errors</h2>

<p>You cannot convert a number to upper case:</p>

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

<script>
var num = 1;
try {
  num.toUpperCase();
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}
</script>

</body>
</html>


URI (Uniform Resource Identifier) Error


Một URIError được thrown nếu bạn dùng một kí tự không hợp lệ trong một hàm URI:

ví dụ

try {
  decodeURI("%%%");   // You cannot URI decode percent signs
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Errors</h2>

<p>Some characters cannot be decoded with decodeURI():</p>

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

<script>
try {
  decodeURI("%%%");
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}
</script>

</body>
</html>


Các thuộc tính đối tượng lỗi không tiêu chuẩn(Non-Standard Error Object Properties)


Mozilla và Microsoft định danh một số các thuộc tính đối tượng lỗi không tiêu chuẩn

fileName (Mozilla)
lineNumber (Mozilla)
columnNumber (Mozilla)
stack (Mozilla)
description (Microsoft)
number (Microsoft)

Đừng dùng chúng trong các trang web công cộng. Chúng sẽ không hoạt động trong tất cả các trình duyệt.



Tags: