Cách xử lý lỗi với try catch trong Javascript

Trong bài này chúng ta sẽ tìm hiểu cách xử lý lỗi với cấu trúc try catch trong javascript, qua đó sẽ giúp bạn nắm bắt được bí quyết điều hướng và bắt lỗi trong js cực kì đơn giản.

Việc bắt lỗi trong lập trình rất quan trọng, nếu làm không đúng cách thì sẽ mất rất nhiều thời gian để tìm ra lỗi. Có nhiều người nói vui rằng, bugs không phải là lỗi mà nó là một tính năng :) Ngụ ý của câu này muốn nói rằng trong lập trình không phải lúc nào cũng hoàn hảo, một chương trình phải trải qua rất nhiều công đoạn, trong đó có công đoạn kiểm thử để tìm lỗi.

Và trong bài này chúng ta sẽ tìm hiểu đến lệnh try catch, không chỉ ở javascript mà hầu hết các ngôn ngữ lập trình đều hỗ trợ lệnh này.

1. Try catch javascript là gì?

Try catch là một khối lệnh dùng để bắt lỗi chương trình trong javascript. 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.

Bài viết này được đăng tại [free tuts .net]

Nếu bạn nghĩ các lỗi đó có thể sử dụng lệnh if else để bắt thì thực tế không hoàn toàn như vậy. If else rất linh động nhưng nó chỉ được dùng trong trường hợp rẻ nhánh mà thôi. Nó sẽ không phát hiện ra những lỗi nghiệm trọng về cú pháp, điều mà chỉ có try catch mới làm được.

Hầu hết các lỗi trong javascript đều nằm trong một object xác định. Ví dụ lỗi cú pháp thì sẽ nằm trong đối tượng syntaxError, lỗi sử dụng biến chưa khai báo thì nằm trong đối tượng ReferenceError, các lỗi cơ bản thì nằm trong đối tượng Error...

Với try catch bạn cũng có thể tự tạo ra một object error cho riêng mình. Nghe quá hấp dẫn phải không các bạn? Ta hãy cùng bắt đầu tìm hiểu nó ngay nhé.

2. Cú pháp lệnh try catch trong javascript

Cấu trúc try - catch không còn xa lạ gì trong các ngôn ngữ lập trình khác, và trong Javascript cũng tương tự.

Cú pháp như sau:

try {
    // Quăng lỗi ra
    throw("Noi dung loi");  
} catch (e){
    // Đó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 ...
    console.log(e.message);
} finally{
    // Cuối cùng chạy cái này
    // Luôn luôn chạy sau cùng
    console.log('End of try catch');
}

Như vậy luồng chạy của lệnh try catch sẽ như sau:

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

Như vậy vị trí finally sẽ luôn luôn được thực thi và sẽ thực thi cuối cùng. finally là một tùy chọn, bạn có thể sử dụng hoặc không đều được. 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 ở phần 1.

Ví dụ 1: Sử dụng biến nhưng chưa định nghĩa.

Nếu bình thường thì chương trình bị dừng, nhưng vì ta sử dụng try - catch nên chương trình vẫn hoạt động bình thường.

try {
    // Sử dụng biến message chưa được định nghĩa
    console.log(message);  
} catch (e){
    console.log(e.message);
}

Nếu chạy đoạn code này lên thì sẽ nhận được thông báo là biến message chưa được định nghĩa (message is not defined).

Ví dụ: Sử dụng sai cú pháp nhưng chương trình vẫn chạy.

try {
    fadsfas
    fasdfas
    fsda
} catch (e){
    console.log(e.message);
} finally{
    console.log('End');
}

Chương trình này nếu chạy lên thì xuất hiện dòng chữ 'fadsfas is not defined', và đoạn code trong finally vẫn hoạt động bình thường, điều này chứng tỏ chương trình không bị dừng đột ngột.

3. Throw new Error() trong try catch javascript

Tham số e trong catch chính là một error object mặc định của javascript. Nhưng thực tế thì có một số trường hợp không phải là một lỗi, mà nó là một tính năng. Ví dụ, mình muốn bắt lỗi nếu người dùng nhập vào dữ liệu rỗng thì sẽ xuất ra thông báo lỗi bên trong phần catch thì phải làm sao?

Trường hợp này ta sẽ sử dụng lệnh throw để quăng ra một lỗi Error như sau:

throw new Error('Nội dung thông báo lỗi');

Đối tượng Error là một constructor, nên bạn có thể sử dụng từ khóa new để tạo một instance của Error.

Ví dụ: Sử dụng throw new Error('message') để xuất thông báo lỗi.

Trong ví dụ này mình muốn kiểm tra biến domain, nếu giá trị của nó không phải là freetuts.net thì quăng ra lỗi.

var domain = 'techtuts.net'

try {
    if (domain !== 'freetuts.net'){
        throw new Error('Domain nay khong phai la trang chu');
    }
} catch (e){
    console.log(e.message);
} finally{
    console.log('End');
}

Chạy lên sẽ xuất hiện dòng chữ 'domain này không phải là trang chủ'.

Mình thử console.log tham số e để xem có gì trong đó nhé.

catch (e){
    console.log(e);
}

Kết quả như sau:

Error: Domain nay khong phai la trang chu
    at editor_display.html:16
editor_display.html:21 End

4. Tạo một object error có thể sử dụng trong try catch

Phần 3 mình đã hướng dẫn cách sử dụng từ khóa throw để quăng một instance Error. Tuy nhiên, đó là cách viết rất cơ bản, ta hoàn toàn có thể đưa nó vào trong một class hoặc một constructor function để tiện cho việc sử dụng.

Bước 1: Tạo một object UserError

Sử dụng function:

function UserError(){
    
    this.throwLogin = function(){
        throw new Error('Invalid username and password');
    };
    
    this.throwSession = function(){
        throw new Error('Your request is timeout');
    };
    
    return this;
}

Hoặc sử dụng class:

class UserError {
    throwLogin() {
        throw new Error('Invalid username and password');
    }

    throwSession = function () {
        throw new Error('Your request is timeout');
    }
}

Bước 2: Sử dụng object UserError

Để sử dụng thì chúng ta làm như sau:

var username = 'thehalfheart';
var password = 'admin@';
try {
    if (username !== 'admin' || password != 'admin@'){
        new UserError().throwLogin();
    }
}catch (e){
    console.log(e.message);
}

5. Danh sách các Object Error trong Javascript

Đọc tới đây thì có lẽ các bạn đã muốn biết trong javascript có những object error nào rồi phải không nào? Không làm các ban thất vọng, dưới đây là danh sách những error thường gặp nhất trong javascript.

• EvalError - Lỗi trong hàm eval.
• RangeError - Nằm ngoài phạm vi giới hạn của một kiểu dữ liệu nào đó.
• ReferenceError - Sử dụng một biến chưa được khai báo
• SyntaxError - Lỗi về cú pháp
• URI (Uniform Resource Identifier) Error - Lỗi được đưa ra nếu bạn sử dụng các ký tự không hợp lệ trong một hàm URI.

Bạn không cần phải chờ javascript quăng ra những lỗi này mà hoàn toàn có thể khởi tạo chúng.

let error = new Error(message);
// or
let error = new SyntaxError(message);
let error = new ReferenceError(message);

Sau đó kết hợp với lệnh throw để quăng lỗi vào phần catch.

6. Lời kết

Như vậy là mình đã hướng dẫn xong cách sử dụng lệnh try catch trong javascript. Đây là một lệnh rất hay phải không các bạn?

Nếu bạn chỉ dùng javascript ở mức cơ bản thì có thể ít khi dùng đến lệnh này. Nhưng khi làm việc với các framework hoặc làm việc nhiều với các đối tượng thì không thể thiếu. Hẹn gặp lại các bạn ở bài tiếp theo nhé.