Xử lý lỗi trong JavaScript Sử dụng try ... catch

Mã tốt là mã ngăn chặn trước các lỗi trong chương trình làm hỏng chương trình và thay vào đó, xử lý các lỗi đó một cách duyên dáng bằng cách thực hiện hành động như khôi phục lỗi, thông báo cho user về nó hoặc ghi lại lỗi ở đâu đó. Đây được gọi là xử lý lỗi và cơ chế chính để xử lý lỗi trong JavaScript là cấu trúc try… catch.

Hãy một thời gian ngắn đi qua làm thế nào để sử dụng try ... catch, và sau đó cũng nhìn vào try ... catch ... finally và báo cáo kết quả ném để ném lỗi tùy chỉnh riêng của ta .

cố gắng bắt

Đây là cú pháp cơ bản để thử… catch:

try {
  // some code that my error-out
} catch (e) {
  // this will run only if the code in the try block errors-out
}

Chú ý cách khối bắt được quyền truy cập vào đối tượng lỗi ( e trong ví dụ trên). Đối tượng lỗi sẽ có tên và thuộc tính thông báo . Trong hầu hết các môi trường, đối tượng lỗi cũng sẽ có thuộc tính ngăn xếp với dấu vết ngăn xếp dẫn đến lỗi.

Nếu bạn đăng nhập đối tượng lỗi vào console , thuộc tính tên và thông báo của nó sẽ được nối với nhau một cách thuận tiện .

Đây là một ví dụ mà ta viết sai chính tả một tên biến:

let myVariable = 2;
try {
  console.log(myVriable + 77);
} catch (e) {
  console.log('Oopsies -', e);
}

Trong trường hợp này, khối bắt sẽ được thực thi và thông báo sau được in ra console :

Oopsies - ReferenceError: myVriable is not defined

try… catch chỉ xử lý các lỗi gặp phải trong thời gian chạy và JavaScript không hợp lệ sẽ xuất hiện lỗi tại thời điểm phân tích cú pháp, vì vậy chương trình của bạn sẽ không chạy. Thay vào đó, hãy sử dụng linter như ESLint để bắt các lỗi đó trực tiếp khi tạo mã của bạn.

Xử lý lỗi tùy chỉnh

Thông thường, thay vì bắt lỗi JavaScript thuần túy, thay vào đó, ta sẽ muốn bắt các điều kiện gặp phải trong chương trình của ta được coi là lỗi. Đối với điều này, ta có thể sử dụng câu lệnh ném để đưa ra các lỗi của riêng ta trong một khối thử để lỗi có thể được phát hiện và xử lý:

let myVariable = prompt('Give me a number');

try {
  if (isNaN(+myVariable)) {
    // throws if the value provided can't be coerced to a number
    throw new Error('Not a number!');
  }
  console.log('Good choice', myVariable);
} catch (e) {
  console.log(e);
}

Với ví dụ trên, nếu ta không nhập một giá trị có thể bị ép buộc thành một số, ta sẽ tạo ra một lỗi tùy chỉnh sau đó bị mắc bởi mệnh đề bắt của ta .

Bạn cũng có thể thấy rằng ta sử dụng hàm tạo Lỗi để tạo đối tượng lỗi với thông báo tùy chỉnh được truyền vào làm đối số đầu tiên. Trong trường hợp này, đối tượng lỗi của ta sẽ có tên là Lỗi , nhưng ta cũng có thể tạo ra một loại lỗi cụ thể:

try {
  if (isNaN(+myVariable)) {
    throw new TypeError('Not a number!');
  }
  console.log('Good choice', myVariable);
} catch (e) {
  console.log(e);
}

Sửa lỗi

Một phương pháp viết mã tốt là chỉ bắt và xử lý các lỗi mà ta mong đợi và sau đó lặp lại các lỗi khác sẽ được xử lý bởi cha mẹ tiềm năng, hãy thử… catch construct:

let myVariable = prompt('Give me a number');

try {
  if (isNaN(+myVariable)) {
    throw new TypeError('Not a number!');
  }
  console.log('Good choice', myVariable);
} catch (e) {
  if (e.name === 'TypeError') {
    console.log(e);
  } else {
    throw e;
  }
}

Với ví dụ trên, nếu một lỗi khác với TypeError của ta gặp phải trong mệnh đề try , mệnh đề bắt của ta sẽ lặp lại lỗi cần xử lý bằng cách sử dụng cấu trúc try… catch root mà ta sẽ đặt.

thử… bắt… cuối cùng

Bạn cũng có thể gắn vào một khối cuối cùng đảm bảo rằng một số mã chạy dù mã trong thử có chặn lỗi hay không:

let myVariable = 2;
try {
  console.log(myVriable + 77);
} catch (e) {
  console.log('Oopsies -', e);
} finally {
  console.log('Runs no matter what');
}

Khối cuối cùng có thể hữu ích để xóa mã của bạn.

cố gắng… cuối cùng

Giống như cuối cùng , mệnh đề bắt là tùy chọn và, nếu bạn muốn, bạn có thể sử dụng try… cuối cùng đảm bảo rằng một số mã chạy khi gặp lỗi.

Ví dụ ở đây, ta cố gắng đặt màu nền trên một phần tử không tồn tại. Đầu tiên, sử dụng thử… bắt… cuối cùng:

try {
  document.querySelector('.not-there').style.backgroundColor = 'pink';
} catch (e) {
  console.log('Oh no -', e);
} finally {
  console.log('Finally runs');
}
console.log('After try block');

// Oh no - TypeError: Cannot read property 'style' of null
// Finally runs
// After try block

Và bây giờ chỉ sử dụng thử… cuối cùng:

try {
  document.querySelector('.here2').style.backgroundColor = 'pink';
} finally {
  console.log('Finally runs');
}
console.log('After try block');

// Finally runs
// Uncaught TypeError: Cannot read property 'style' of null

Lưu ý cách, khi mệnh đề bắt bị thiếu, lỗi không được giải quyết và chương trình bị treo, nhưng chỉ sau khi chạy mã trong mệnh đề cuối cùng của ta .

Tags:

Các tin liên quan

Cách sử dụng các phương thức đối tượng trong JavaScript
2018-08-03
Hiểu sự kiện trong JavaScript
2018-06-19
Lập lịch tác vụ trong JavaScript Sử dụng setTimeout & setInterval
2018-06-12
Hiểu các lớp trong JavaScript
2018-05-04
Truy cập API Rails trong ứng dụng khách JavaScript bằng Rails Ranger
2018-03-15
Hiểu các biến, phạm vi và lưu trữ trong JavaScript
2018-02-20
Tìm hiểu Nguyên mẫu và Kế thừa trong JavaScript
2018-01-12
Khám phá đối tượng ngày JavaScript
2017-12-06
chuỗi con so với chuỗi con trong JavaScript
2017-11-06
Hiểu Ngày và Giờ trong JavaScript
2017-10-19