JavaScript Errors - Throw and Try to Catch

by GokiSoft.Com - 10:13 19/05/2020 2,580 Lượt Xem

Short URL: https://gokisoft.com/1364

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ính	Mô 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ỗi	Mô tả
EvalError	Một lỗi đã xảy ra trong hàm eval()
RangeError	Một số "ngoài phạm vi" đã xảy ra
ReferenceError	Một tham chiếu không hợp lệ đã xảy
SyntaxError	Một lỗi cú pháp đã xảy ra
TypeError	Một lỗi về kiểu đã xảy ra
URIError	Mộ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>