Nội dung bài viết

Video học lập trình mỗi ngày

Try catch xuất hiện hầu hết tất cả những ngôn ngữ lập trình, chứ không riêng gì javascript. Một lập trình viên giỏi không có nghĩa là code không có lỗi, mà giỏi ở đây đó chính là, anh ta biết quản lý lỗi một cách xuất sắc nhất, một bug hay error có thể giết chết một process của một ứng dụng. Trong bài post này, chúng ta sẽ đi xem try...catch làm được gì?

Học được gì sau bài viết về try catch

Bằng cách đọc bài viết này, bạn có thể hiểu được

Hiểu về try catch dùng để làm gì?
Khi nào sử dụng try catch?
Vì sao có lúc try catch không bắt được error?
Sử dụng try catch không đúng chỗ?
Sự khác biệt giữa try catch và try catch promise javascript?

Hàm try catch là gì? Và dùng để làm gì?

Câu hỏi đơn giản, nhưng đừng đánh giá mình quá cao. Bạn có thể phải trả giá đấy. Từ từ vì sao tôi sẽ nói như vậy. Trước hết hãy trả lời những câu hỏi trên

Try catch được sử dụng để xử lý các lỗi trong lúc thực thi các function và ngăn chúng dừng việc thực thi chương trình, và hơn thế nữa try catch có thể giúp chúng ta có thể xử lý data khi bị lỗi. Nó đơn giản vậy đó, và giờ chúng ta tiếp tục đi xem try catch làm việc trong trường hợp nào?

Try catch javascript làm việc trong trường hợp nào?

Để tipjs nói rõ hơn cho các bạn biết, chính vì thế chúng ta sẽ xây dựng 3 hoàn cảnh để hàm try catch hoạt động như thế nào, giờ đây chúng ta sẽ đi vào ví dụ đầu tiên.

# Ví dụ 1:

try{
    a.
}catch(e){
    console.log("error",e);
}
// output
Uncaught SyntaxError: Unexpected token '}'

Ta nhận được gì với ví dụ trên, một "SyntaxError" vì sao try...catch không handle được error này. SyntaxError xuất hiện khi chương trình chúng ta đang check cú pháp, và chưa chạy đến hàm try...catch nên thực sự hoàn cảnh này nó vô nghĩa. Hiểu nhé... Suy nghĩ tiếp đi or pm tới tipjs ngay!

Tiếp tục với ví dụ tiếp theo

# Ví dụ 2:

try{
    function d(){a.b;}
   d();
}catch(e){
    console.log("error",e);
}
// output
error ReferenceError: a is not defined

Ơn giời, try...catch đã hoạt động rồi và đã print "error ReferenceError: a is not defined". Điều này có nghĩa là gì? try catch sẽ hoạt động khi một function nào đó thực thi bên trong của hàm try catch. Vậy giả sử ta đưa function d() ra ngoài, xem try catch còn check được error đó không?

# Ví dụ 3:

function d(){a.b;}
try{
   d();
}catch(e){
     console.log("error",e);
}
// output
error ReferenceError: a is not defined

Với việc thử nghiệm đưa function d() ra ngoài hàm try catch thì ta vẫn có thể bắt được error. Như vậy thời điểm xảy ra lỗi ở trên là việc thực thi mã đi vào bắt thử và khi phương thức d () được thực thi, việc thực thi functiond đó nằm trong try...catch cho nên, try catch vẫn hoạt động.

Giờ ta thử nghiệm, để function d() ở phía sau hàm try catch thì sao đây,

# Ví dụ 4:

try {
    function d() {
        a.b;
    }
} catch (e) {
    console.log("error", e);
}
console.log(111);
d(); 
// output
111
Uncaught ReferenceError: a is not defined

Nó cũng không hoạt động các bạn à, Vì sao, là vì function d() được xác định trong try...catch, nhưng nó lại thực thi ở bên ngoài. Khi function d() được thực thi, và xảy ra lỗi. Tại thời điểm này, try...catch đã xong và 111 đã được return. Do đó try...catch không bắt được error là đúng.

# Ví dụ 5:

try {
    setTimeout(() => {
        console.log(a.b);
    }, 100)
} catch (e) {
    console.log('error', e);
}
console.log(111); 

//output
111
Uncaught ReferenceError: a is not defined

Ở ví dụ này, chúng ta nâng cấp xem thử với setTimeout thì sẽ ra sao. Bạn biết đây, try...catch không hề hoạt động, chính vì khi try..catch bắt đầu xử lý xong, thì setTimeout mới bắt đầu thực thi, chính vì lẽ đó try...catch không thể hoạt động.

Try catch await javascript

Như vậy trên kia, tipjs đã giúp các bạn hiểu hơn về cách try catch hoạt động như thế nào? Với 5 ví dụ phần nào cũng giúp bạn sáng tỏ hơn nhiều trong việc handle error in javascript. Và tiếp theo, nhiệm vụ của chúng ta đi tìm hiểu xem "Try catch sẽ hoạt động như thế nào với Promise javascript". Một đề tài rất thú vị đấy. Mời các bạn tiếp tục đón xem nhoá. Update thêm phần mẹo nhỏ...

Mẹo nhỏ với xử lý lỗi

Sau khi chúng ta hiểu bản chất của try catch làm việc như thế nào, và khi nào nên sử dụng, thì một mẹo nhỏ dưới đây giúp bạn nắm giữ lỗi một cách chuyên nghiệp. Nếu như thực tế bạn viết như vậy thì bạn nên từ bỏ ngay từ bây giờ

try {
  functionSomeThing();
} catch (error) {
  console.log(error);
}

Nếu bạn là một người trách nhiệm với hệ thống, với miếng cơm của mình thì thay vào đó bạn nên viết nhu thế này

try {
  functionSomeThing();
} catch (error) {
  // Hiện thị error lên realtime
  console.error(error);
  // Nhắc nhở người dùng trên giao diện nếu cần
  notifyUserOfError(error);
  // Save lại lỗi, để xem log mỗi ngày khi ngủ dậy.
  reportErrorToService(error);

}

Một mẹo nhỏ như có thể giúp bạn sống trách nhiệm hơn với dự án.

Mà nếu có thể tốt hơn nữa thì đùa chút cho vui kakakaka

try {
    something
} catch (e) {
    window.location.href =
 "http://stackoverflow.com/search?q=[js]+" +
        e.message;
}

Sự thật về try catch javascript