Đối tượng ngoại lệ trong JavaScript là gì?

Ứng dụng của bạn trở nên mạnh mẽ hơn khi bạn có kinh nghiệm lập trình. Các cải tiến đối với kỹ thuật mã hóa đóng một vai trò quan trọng nhưng bạn cũng sẽ học cách xem xét các trường hợp cạnh. Nếu một cái gì đó có thể đi sai, nó sẽ đi sai. thông thường khi người dùng đầu tiên truy cập hệ thống mới của bạn

Một số lỗi có thể tránh được

• Một người nói dối JavaScript hoặc một trình soạn thảo giỏi có thể bắt lỗi cú pháp chẳng hạn như câu sai chính tả và thiếu dấu ngoặc

• Bạn có thể sử dụng xác thực để bắt lỗi dữ liệu từ người dùng hoặc các hệ thống khác. Không bao giờ đưa ra giả định về sự khéo léo của người dùng để gây ra sự tàn phá. Bạn có thể mong đợi một số nguyên khi hỏi tuổi của ai đó nhưng liệu họ có thể để trống ô, nhập giá trị âm, sử dụng giá trị phân số hoặc thậm chí nhập đầy đủ “hai mươi mốt” bằng ngôn ngữ mẹ đẻ của họ không

  Hãy nhớ rằng xác thực phía máy chủ là điều cần thiết. Xác thực phía máy khách dựa trên trình duyệt có thể cải thiện giao diện người dùng nhưng người dùng có thể đang sử dụng một ứng dụng mà JavaScript bị tắt, không tải được hoặc không thực thi được. Nó có thể không phải là trình duyệt đang gọi API của bạn

Các lỗi thời gian chạy khác là không thể tránh được

• mạng có thể thất bại
• một máy chủ hoặc ứng dụng bận rộn có thể mất quá nhiều thời gian để phản hồi
• tập lệnh hoặc nội dung khác có thể hết thời gian chờ
• ứng dụng có thể thất bại
• đĩa hoặc cơ sở dữ liệu có thể bị lỗi
• một hệ điều hành máy chủ có thể thất bại
• cơ sở hạ tầng của máy chủ có thể bị lỗi

Đây có thể là tạm thời. Bạn không nhất thiết phải mã hóa theo cách của mình để thoát khỏi những vấn đề này nhưng bạn có thể lường trước các vấn đề, thực hiện các hành động thích hợp và làm cho ứng dụng của bạn linh hoạt hơn

Hiển thị lỗi là phương sách cuối cùng

Tất cả chúng ta đều gặp lỗi trong các ứng dụng. Một số hữu ích

“Tệp đã tồn tại. Bạn có muốn ghi đè lên nó không?”

Những người khác thì ít hơn

“LỖI 5969”

Hiển thị lỗi cho người dùng phải là biện pháp cuối cùng sau khi sử dụng hết tất cả các tùy chọn khác

Bạn có thể bỏ qua một số lỗi ít nghiêm trọng hơn như hình ảnh không tải được. Trong các trường hợp khác, có thể thực hiện các hành động khắc phục hoặc phục hồi. Ví dụ: nếu bạn không thể lưu dữ liệu vào máy chủ do lỗi mạng, bạn có thể lưu trữ tạm thời dữ liệu đó trong IndexedDB hoặc localStorage và thử lại sau vài phút. Chỉ cần hiển thị cảnh báo khi lưu nhiều lần không thành công và người dùng có nguy cơ mất dữ liệu. Thậm chí sau đó. đảm bảo người dùng có thể thực hiện các hành động phù hợp. Họ có thể kết nối lại với mạng nhưng điều đó sẽ không hữu ích nếu máy chủ của bạn ngừng hoạt động

Xử lý lỗi trong JavaScript

Xử lý lỗi đơn giản trong JavaScript nhưng nó thường bị che giấu trong bí ẩn và có thể trở nên phức tạp khi xem xét mã không đồng bộ

Một “lỗi” là một đối tượng mà bạn có thể ném ra để đưa ra một ngoại lệ — có thể tạm dừng chương trình nếu nó không được nắm bắt và xử lý một cách thích hợp. Bạn có thể tạo một đối tượng

const e = Error('An error has occurred');

8 bằng cách chuyển một thông báo tùy chọn tới hàm tạo

const e = new Error('An error has occurred');

Bạn cũng có thể sử dụng

const e = Error('An error has occurred');

8 giống như một hàm không có

const e = new Error('An error has occurred', 'script.js', 99);

0 — nó vẫn trả về một đối tượng

const e = Error('An error has occurred');

8 giống hệt như trên

const e = Error('An error has occurred');

Bạn có thể chuyển tên tệp và số dòng làm tham số thứ hai và thứ ba

const e = new Error('An error has occurred', 'script.js', 99);

Điều này hiếm khi cần thiết vì chúng mặc định cho dòng mà bạn đã tạo đối tượng

const e = Error('An error has occurred');

8 trong tệp hiện tại

Sau khi được tạo, một đối tượng

const e = Error('An error has occurred');

8 có các thuộc tính sau mà bạn có thể đọc và viết

• const e = new Error('An error has occurred', 'script.js', 99);

  4. tên của loại

  const e = Error('An error has occurred');

  8 (trong trường hợp này là ____3_______6)

• const e = new Error('An error has occurred', 'script.js', 99);

  7. thông báo lỗi

Các thuộc tính đọc/ghi sau đây cũng được hỗ trợ trong Firefox

• const e = new Error('An error has occurred', 'script.js', 99);

  8. tập tin xảy ra lỗi

• const e = new Error('An error has occurred', 'script.js', 99);

  9. số dòng nơi xảy ra lỗi

• throw new Error('An error has occurred');

  0. số cột trên dòng xảy ra lỗi

• throw new Error('An error has occurred');

  1. theo dõi ngăn xếp - danh sách các lệnh gọi hàm được thực hiện để xử lý lỗi

Các loại lỗi

Cũng như một

const e = Error('An error has occurred');

8 chung, JavaScript hỗ trợ các loại lỗi cụ thể

• throw new Error('An error has occurred');

  3. gây ra bởi một

  throw new Error('An error has occurred');

  4

• throw new Error('An error has occurred');

  5. một giá trị bên ngoài một phạm vi hợp lệ

• throw new Error('An error has occurred');

  6. xảy ra khi hủy tham chiếu một tham chiếu không hợp lệ

• throw new Error('An error has occurred');

  7. cú pháp không hợp lệ

• throw new Error('An error has occurred');

  8. một giá trị không phải là một loại hợp lệ

• throw new Error('An error has occurred');

  9. thông số không hợp lệ được chuyển đến

  function sum(a, b) {
  
    if (isNaN(a) || isNaN(b)) {
      throw new TypeError('Value is not a number.');
    }
  
    return a + b;
  
  }

  0 hoặc

  function sum(a, b) {
  
    if (isNaN(a) || isNaN(b)) {
      throw new TypeError('Value is not a number.');
    }
  
    return a + b;
  
  }

  1

• function sum(a, b) {
  
    if (isNaN(a) || isNaN(b)) {
      throw new TypeError('Value is not a number.');
    }
  
    return a + b;
  
  }

  2. một số lỗi được bao bọc trong một lỗi đơn lẻ thường xuất hiện khi gọi một thao tác, chẳng hạn như

  function sum(a, b) {
  
    if (isNaN(a) || isNaN(b)) {
      throw new TypeError('Value is not a number.');
    }
  
    return a + b;
  
  }

  3

Trình thông dịch JavaScript sẽ đưa ra các lỗi thích hợp khi cần thiết. Trong hầu hết các trường hợp, bạn sẽ sử dụng

const e = Error('An error has occurred');

8 hoặc có lẽ là

throw new Error('An error has occurred');

8 trong mã của riêng bạn

Ném một ngoại lệ

Tạo một đối tượng

const e = Error('An error has occurred');

8 không tự làm gì cả. Bạn phải sử dụng câu lệnh

function sum(a, b) {

  if (isNaN(a) || isNaN(b)) {
    throw new TypeError('Value is not a number.');
  }

  return a + b;

}

7 để, bạn biết đấy, “ném” một

const e = Error('An error has occurred');

8 để đưa ra một ngoại lệ

throw new Error('An error has occurred');

Hàm

function sum(a, b) {

  if (isNaN(a) || isNaN(b)) {
    throw new TypeError('Value is not a number.');
  }

  return a + b;

}

9 này đưa ra một giá trị

throw new Error('An error has occurred');

8 khi một trong hai đối số không phải là số — hàm

throw 'Error string';
throw 42;
throw true;
throw { message: 'An error', name: 'CustomError' };

1 không bao giờ được thực thi

function sum(a, b) {

  if (isNaN(a) || isNaN(b)) {
    throw new TypeError('Value is not a number.');
  }

  return a + b;

}

Thực tế để

function sum(a, b) {

  if (isNaN(a) || isNaN(b)) {
    throw new TypeError('Value is not a number.');
  }

  return a + b;

}

7 một đối tượng

const e = Error('An error has occurred');

8 nhưng bạn có thể sử dụng bất kỳ giá trị hoặc đối tượng nào

throw 'Error string';
throw 42;
throw true;
throw { message: 'An error', name: 'CustomError' };

Khi bạn

function sum(a, b) {

  if (isNaN(a) || isNaN(b)) {
    throw new TypeError('Value is not a number.');
  }

  return a + b;

}

7 một ngoại lệ, nó sẽ nổi lên ngăn xếp cuộc gọi - trừ khi nó bị bắt. Các ngoại lệ chưa được xử lý cuối cùng sẽ đạt đến đỉnh của ngăn xếp nơi chương trình sẽ tạm dừng và hiển thị lỗi trong bảng điều khiển DevTools, e. g

Uncaught TypeError: Value is not a number.
  sum https://mysite.com/js/index.js:3

Bắt ngoại lệ

Bạn có thể bắt ngoại lệ trong một khối

throw 'Error string';
throw 42;
throw true;
throw { message: 'An error', name: 'CustomError' };

5

try {
  console.log( sum(1, 'a') );
}
catch (err) {
  console.error( err.message );
}

Điều này thực thi mã trong khối

throw 'Error string';
throw 42;
throw true;
throw { message: 'An error', name: 'CustomError' };

6, nhưng khi một ngoại lệ xảy ra, khối

throw 'Error string';
throw 42;
throw true;
throw { message: 'An error', name: 'CustomError' };

7 sẽ nhận đối tượng được trả về bởi khối

function sum(a, b) {

  if (isNaN(a) || isNaN(b)) {
    throw new TypeError('Value is not a number.');
  }

  return a + b;

}

7

Một câu lệnh

throw 'Error string';
throw 42;
throw true;
throw { message: 'An error', name: 'CustomError' };

9 có thể phân tích lỗi và phản ứng tương ứng, e. g

try {
  console.log( sum(1, 'a') );
}
catch (err) {
  if (err instanceof TypeError) {
    console.error( 'wrong type' );
  }
  else {
    console.error( err.message );
  }
}

Bạn có thể xác định một khối

Uncaught TypeError: Value is not a number.
  sum https://mysite.com/js/index.js:3

0 tùy chọn nếu bạn yêu cầu mã chạy cho dù mã

Uncaught TypeError: Value is not a number.
  sum https://mysite.com/js/index.js:3

1 hoặc

throw 'Error string';
throw 42;
throw true;
throw { message: 'An error', name: 'CustomError' };

9 có thực thi hay không. Điều này có thể hữu ích khi dọn dẹp, e. g. để đóng kết nối cơ sở dữ liệu trong Node. js hoặc Deno

try {
  console.log( sum(1, 'a') );
}
catch (err) {
  console.error( err.message );
}
finally {
  // this always runs
  console.log( 'program has ended' );
}

Khối

Uncaught TypeError: Value is not a number.
  sum https://mysite.com/js/index.js:3

1 yêu cầu khối

throw 'Error string';
throw 42;
throw true;
throw { message: 'An error', name: 'CustomError' };

9, khối

Uncaught TypeError: Value is not a number.
  sum https://mysite.com/js/index.js:3

5 hoặc cả hai

Lưu ý rằng khi một khối

Uncaught TypeError: Value is not a number.
  sum https://mysite.com/js/index.js:3

5 chứa một

throw 'Error string';
throw 42;
throw true;
throw { message: 'An error', name: 'CustomError' };

1, giá trị đó sẽ trở thành giá trị trả về cho toàn bộ

Uncaught TypeError: Value is not a number.
  sum https://mysite.com/js/index.js:3

8 bất kể có bất kỳ câu lệnh

throw 'Error string';
throw 42;
throw true;
throw { message: 'An error', name: 'CustomError' };

1 nào trong các khối

Uncaught TypeError: Value is not a number.
  sum https://mysite.com/js/index.js:3

1 và

throw 'Error string';
throw 42;
throw true;
throw { message: 'An error', name: 'CustomError' };

9

Phát lại phiên mã nguồn mở

OpenReplay là bộ phát lại phiên mã nguồn mở cho phép bạn xem những gì người dùng làm trên ứng dụng web của bạn, giúp bạn khắc phục sự cố nhanh hơn. OpenReplay tự lưu trữ để kiểm soát hoàn toàn dữ liệu của bạn

Bắt đầu tận hưởng trải nghiệm sửa lỗi của bạn - bắt đầu sử dụng OpenReplay miễn phí

Các khối throw 'Error string'; throw 42; throw true; throw { message: 'An error', name: 'CustomError' };5 lồng nhau và lỗi ném lại

Một ngoại lệ nổi bong bóng lên ngăn xếp và chỉ bị bắt một lần bởi khối

throw 'Error string';
throw 42;
throw true;
throw { message: 'An error', name: 'CustomError' };

9 gần nhất, e. g

const e = Error('An error has occurred');

0

Bất kỳ khối

throw 'Error string';
throw 42;
throw true;
throw { message: 'An error', name: 'CustomError' };

9 nào cũng có thể

function sum(a, b) {

  if (isNaN(a) || isNaN(b)) {
    throw new TypeError('Value is not a number.');
  }

  return a + b;

}

7 một ngoại lệ mới bị chặn bởi khối

throw 'Error string';
throw 42;
throw true;
throw { message: 'An error', name: 'CustomError' };

9 bên ngoài. Bạn có thể truyền đối tượng

const e = Error('An error has occurred');

8 đầu tiên cho một

const e = Error('An error has occurred');

8 mới trong thuộc tính

try {
  console.log( sum(1, 'a') );
}
catch (err) {
  console.error( err.message );
}

9 của một đối tượng được truyền cho hàm tạo. Điều này làm cho nó có thể nâng cao và kiểm tra một chuỗi các lỗi

Cả hai khối

throw 'Error string';
throw 42;
throw true;
throw { message: 'An error', name: 'CustomError' };

9 đều thực thi trong ví dụ này vì lỗi đầu tiên gây ra lỗi thứ hai

const e = Error('An error has occurred');

1

Ném ngoại lệ trong các hàm không đồng bộ

Bạn không thể

throw 'Error string';
throw 42;
throw true;
throw { message: 'An error', name: 'CustomError' };

9 một ngoại lệ được đưa ra bởi một hàm không đồng bộ vì nó được đưa ra sau khi khối

throw 'Error string';
throw 42;
throw true;
throw { message: 'An error', name: 'CustomError' };

5 đã hoàn tất thực thi. Điều này sẽ thất bại

const e = Error('An error has occurred');

2

Sau khi một giây trôi qua, bảng điều khiển hiển thị

const e = Error('An error has occurred');

3

Nếu bạn đang sử dụng một cuộc gọi lại, quy ước được coi là trong các khung và thời gian chạy như Node. js là trả về lỗi làm tham số đầu tiên cho hàm đó. Điều này không

function sum(a, b) {

  if (isNaN(a) || isNaN(b)) {
    throw new TypeError('Value is not a number.');
  }

  return a + b;

}

7 ngoại lệ mặc dù bạn có thể làm điều đó theo cách thủ công khi cần thiết

const e = Error('An error has occurred');

4

Trong ES6 hiện đại, tốt hơn hết là trả lại Promise khi xác định các hàm không đồng bộ. Khi xảy ra lỗi, phương thức

try {
  console.log( sum(1, 'a') );
}
catch (err) {
  if (err instanceof TypeError) {
    console.error( 'wrong type' );
  }
  else {
    console.error( err.message );
  }
}

4 của Promise có thể trả về một đối tượng

const e = Error('An error has occurred');

8 mới (mặc dù có thể có bất kỳ giá trị hoặc đối tượng nào)

const e = Error('An error has occurred');

5

Phương thức

try {
  console.log( sum(1, 'a') );
}
catch (err) {
  if (err instanceof TypeError) {
    console.error( 'wrong type' );
  }
  else {
    console.error( err.message );
  }
}

6 thực thi khi truyền một tham số

try {
  console.log( sum(1, 'a') );
}
catch (err) {
  if (err instanceof TypeError) {
    console.error( 'wrong type' );
  }
  else {
    console.error( err.message );
  }
}

7 không hợp lệ để nó có thể phản ứng với đối tượng

const e = Error('An error has occurred');

8 được trả về

const e = Error('An error has occurred');

6

Bất kỳ hàm nào trả về

try {
  console.log( sum(1, 'a') );
}
catch (err) {
  if (err instanceof TypeError) {
    console.error( 'wrong type' );
  }
  else {
    console.error( err.message );
  }
}

9 đều có thể được gọi bởi hàm

try {
  console.log( sum(1, 'a') );
}
catch (err) {
  console.error( err.message );
}
finally {
  // this always runs
  console.log( 'program has ended' );
}

0 bằng cách sử dụng câu lệnh

try {
  console.log( sum(1, 'a') );
}
catch (err) {
  console.error( err.message );
}
finally {
  // this always runs
  console.log( 'program has ended' );
}

1. Bạn có thể chứa cái này trong một khối

throw 'Error string';
throw 42;
throw true;
throw { message: 'An error', name: 'CustomError' };

5 chạy giống hệt với ví dụ về lời hứa của ________ 54_______3/________ 54 _______4 ở trên nhưng có thể dễ đọc hơn một chút

const e = Error('An error has occurred');

7

Lỗi là không thể tránh khỏi

Dễ dàng tạo đối tượng lỗi và tăng ngoại lệ trong JavaScript. Phản ứng thích hợp và xây dựng các ứng dụng linh hoạt có phần khó khăn hơn. Lời khuyên tốt nhất. mong đợi những điều bất ngờ và xử lý lỗi càng sớm càng tốt

Làm cách nào để sử dụng ngoại lệ trong JavaScript?

Làm cách nào để giải quyết lỗi đối tượng đối tượng trong JavaScript?

Bất kỳ đối tượng có thể được ném như một ngoại lệ?

Làm cách nào để đọc đối tượng lỗi trong JavaScript?