Cách bắt lỗi bảng điều khiển trong JavaScript

Đặc biệt, có những tình huống mà chúng tôi có thể muốn dừng chương trình hoặc thông báo cho người dùng nếu có điều gì đó tồi tệ xảy ra

Ví dụ

• chương trình đã cố mở một tệp không tồn tại
• kết nối mạng bị hỏng
• người dùng đã nhập đầu vào không hợp lệ

Trong tất cả các trường hợp này, chúng tôi với tư cách là lập trình viên, tạo ra lỗi hoặc chúng tôi để công cụ lập trình tạo ra một số lỗi cho chúng tôi

Sau khi tạo lỗi, chúng tôi có thể thông báo cho người dùng bằng một tin nhắn hoặc chúng tôi có thể tạm dừng thực thi hoàn toàn

Lỗi trong JavaScript là gì?

Một lỗi trong JavaScript là một đối tượng, sau đó được ném ra để tạm dừng chương trình

Để tạo một lỗi mới trong JavaScript, chúng tôi gọi hàm xây dựng thích hợp. Ví dụ: để tạo một lỗi mới, chung chung, chúng ta có thể thực hiện

const err = new Error["Something bad happened!"];

Khi tạo đối tượng lỗi cũng có thể bỏ qua từ khóa

Uncaught DOMException: Node.appendChild: May not add a Document as a child

5

const err = Error["Something bad happened!"];

Sau khi được tạo, đối tượng lỗi trình bày ba thuộc tính

• Uncaught DOMException: Node.appendChild: May not add a Document as a child

  6. một chuỗi có thông báo lỗi

• Uncaught DOMException: Node.appendChild: May not add a Document as a child

  7. loại lỗi

• Uncaught DOMException: Node.appendChild: May not add a Document as a child

  8. dấu vết ngăn xếp của việc thực thi chức năng

Ví dụ: nếu chúng tôi tạo một đối tượng

Uncaught DOMException: Node.appendChild: May not add a Document as a child

9 mới với thông báo thích hợp, thì

Uncaught DOMException: Node.appendChild: May not add a Document as a child

6 sẽ mang chuỗi lỗi thực tế, trong khi

Uncaught DOMException: Node.appendChild: May not add a Document as a child

7 sẽ là

const wrongType = TypeError["Wrong type given, expected number"];

throw wrongType;

2

Uncaught DOMException: Node.appendChild: May not add a Document as a child

0

Firefox cũng triển khai một loạt các thuộc tính không chuẩn như

const wrongType = TypeError["Wrong type given, expected number"];

throw wrongType;

3,

const wrongType = TypeError["Wrong type given, expected number"];

throw wrongType;

4 và

const wrongType = TypeError["Wrong type given, expected number"];

throw wrongType;

5

Nhiều loại lỗi trong JavaScript

Có nhiều loại lỗi trong JavaScript, cụ thể là

• const wrongType = TypeError["Wrong type given, expected number"];
  
  throw wrongType;

  6

• const wrongType = TypeError["Wrong type given, expected number"];
  
  throw wrongType;

  7

• const wrongType = TypeError["Wrong type given, expected number"];
  
  throw wrongType;

  8

• const wrongType = TypeError["Wrong type given, expected number"];
  
  throw wrongType;

  9

• const err = Error["Something bad happened!"];

  00

• const err = Error["Something bad happened!"];

  01

• Uncaught DOMException: Node.appendChild: May not add a Document as a child

  9

• const err = Error["Something bad happened!"];

  03

Hãy nhớ rằng, tất cả các loại lỗi này là các hàm tạo thực tế có nghĩa là trả về một đối tượng lỗi mới

Trong mã của bạn, bạn sẽ chủ yếu sử dụng

const wrongType = TypeError["Wrong type given, expected number"];

throw wrongType;

6 và

Uncaught DOMException: Node.appendChild: May not add a Document as a child

9, hai trong số các loại phổ biến nhất, để tạo đối tượng lỗi của riêng bạn

Hầu hết thời gian, phần lớn lỗi sẽ đến trực tiếp từ công cụ JavaScript, như

const wrongType = TypeError["Wrong type given, expected number"];

throw wrongType;

8 hoặc

const err = Error["Something bad happened!"];

01

Một ví dụ về

Uncaught DOMException: Node.appendChild: May not add a Document as a child

9 xảy ra khi bạn cố gán lại

const err = Error["Something bad happened!"];

09

const err = Error["Something bad happened!"];

8

Một ví dụ về

const err = Error["Something bad happened!"];

01 là khi bạn viết sai từ khóa ngôn ngữ

Uncaught DOMException: Node.appendChild: May not add a Document as a child

0

Hoặc khi bạn sử dụng các từ khóa dành riêng ở những vị trí không phù hợp, chẳng hạn như

const err = Error["Something bad happened!"];

11 bên ngoài hàm

const err = Error["Something bad happened!"];

12

Uncaught DOMException: Node.appendChild: May not add a Document as a child

3

Một ví dụ khác về

Uncaught DOMException: Node.appendChild: May not add a Document as a child

9 xảy ra khi chúng tôi chọn các phần tử HTML không tồn tại trong trang

Uncaught DOMException: Node.appendChild: May not add a Document as a child

5

Ngoài các đối tượng lỗi truyền thống này, một đối tượng

const err = Error["Something bad happened!"];

14 sẽ sớm xuất hiện trong JavaScript.

const err = Error["Something bad happened!"];

14 thuận tiện cho việc gói nhiều lỗi lại với nhau, như chúng ta sẽ thấy sau

Bên cạnh những lỗi tích hợp này, trong trình duyệt, chúng ta cũng có thể tìm thấy

• const err = Error["Something bad happened!"];

  16

• const err = Error["Something bad happened!"];

  17, không dùng nữa và ngày nay không còn được sử dụng

const err = Error["Something bad happened!"];

16 là một nhóm lỗi liên quan đến API Web. Chúng bị ném khi chúng ta làm những việc ngớ ngẩn trong trình duyệt, như

Uncaught DOMException: Node.appendChild: May not add a Document as a child

1

Kết quả

Uncaught DOMException: Node.appendChild: May not add a Document as a child

Để biết danh sách đầy đủ, hãy xem trang này trên MDN

Ngoại lệ là gì?

Hầu hết các nhà phát triển nghĩ rằng lỗi và ngoại lệ là giống nhau. Trong thực tế, một đối tượng lỗi chỉ trở thành ngoại lệ khi nó được ném ra

Để đưa ra một ngoại lệ trong JavaScript, chúng tôi sử dụng

const err = Error["Something bad happened!"];

19, theo sau là đối tượng lỗi

const wrongType = TypeError["Wrong type given, expected number"];

throw wrongType;

Dạng ngắn phổ biến hơn, trong hầu hết các cơ sở mã, bạn sẽ tìm thấy

const err = Error["Something bad happened!"];

0

hoặc

const err = Error["Something bad happened!"];

1

Không có khả năng ném ngoại lệ ra ngoài hàm hoặc khối điều kiện. Thay vào đó, hãy xem xét ví dụ sau

const err = Error["Something bad happened!"];

2

Ở đây chúng tôi kiểm tra xem đối số hàm có phải là một chuỗi không. Nếu không phải chúng ta ném một ngoại lệ

Về mặt kỹ thuật, bạn có thể ném bất cứ thứ gì vào JavaScript, không chỉ các đối tượng lỗi

const err = Error["Something bad happened!"];

3

Tuy nhiên, tốt hơn là nên tránh những điều này. luôn ném các đối tượng lỗi thích hợp, không phải nguyên thủy

Bằng cách đó, bạn giữ cho việc xử lý lỗi nhất quán thông qua cơ sở mã. Các thành viên khác trong nhóm luôn có thể truy cập vào

const err = Error["Something bad happened!"];

20 hoặc

const err = Error["Something bad happened!"];

21 trên đối tượng lỗi

Điều gì xảy ra khi chúng ta ném một ngoại lệ?

Ngoại lệ giống như thang máy đi lên. khi bạn ném một cái, nó sẽ nổi lên trong ngăn xếp chương trình, trừ khi nó bị bắt ở đâu đó

Hãy xem xét đoạn mã sau

const err = Error["Something bad happened!"];

4

Nếu bạn chạy mã này trong trình duyệt hoặc trong Node. js thì chương trình dừng và báo lỗi

const err = Error["Something bad happened!"];

5

Ngoài ra, bạn có thể xem chính xác dòng xảy ra lỗi

Báo cáo này là theo dõi ngăn xếp và rất hữu ích để theo dõi các sự cố trong mã của bạn

Dấu vết ngăn xếp đi từ dưới lên trên. Nên ở đây

const err = Error["Something bad happened!"];

6

Chúng ta có thể nói

• một cái gì đó trong chương trình ở dòng 9 được gọi là

  const err = Error["Something bad happened!"];

  22

• const err = Error["Something bad happened!"];

  22 nổ tung ở dòng 3

Ngoài việc xem dấu vết ngăn xếp này trong bảng điều khiển của trình duyệt, bạn có thể truy cập nó trên thuộc tính

Uncaught DOMException: Node.appendChild: May not add a Document as a child

8 của đối tượng lỗi

Nếu ngoại lệ không được phát hiện, nghĩa là lập trình viên không làm gì để bắt nó, chương trình sẽ bị lỗi

Khi nào và ở đâu bạn bắt gặp một ngoại lệ trong mã của mình tùy thuộc vào trường hợp sử dụng cụ thể

Ví dụ: bạn có thể muốn truyền một ngoại lệ lên trong ngăn xếp để làm hỏng chương trình hoàn toàn. Điều này có thể xảy ra đối với các lỗi nghiêm trọng, khi dừng chương trình sẽ an toàn hơn là làm việc với dữ liệu không hợp lệ

Đã giới thiệu những kiến ​​thức cơ bản, giờ hãy chuyển sự chú ý của chúng ta sang xử lý lỗi và ngoại lệ trong cả mã JavaScript đồng bộ và không đồng bộ

Xử lý lỗi đồng bộ

Mã đồng bộ hầu hết đều đơn giản và do đó việc xử lý lỗi của nó

Xử lý lỗi cho các chức năng thông thường

Mã đồng bộ được thực thi theo cùng thứ tự được viết. Hãy lấy lại ví dụ trước

const err = Error["Something bad happened!"];

4

Tại đây, động cơ gọi và thực thi

const err = Error["Something bad happened!"];

22. Tất cả diễn ra đồng bộ. Để bắt một ngoại lệ bắt nguồn từ chức năng đồng bộ như vậy, chúng ta có thể sử dụng

const err = Error["Something bad happened!"];

26

const err = Error["Something bad happened!"];

8

Thông thường,

const err = Error["Something bad happened!"];

27 xử lý đường dẫn hạnh phúc hoặc với lệnh gọi hàm có khả năng ném

Thay vào đó,

const err = Error["Something bad happened!"];

28 ghi lại ngoại lệ thực tế. Nó nhận đối tượng lỗi mà chúng ta có thể kiểm tra [và gửi từ xa tới một số bộ ghi trong sản xuất]

Mặt khác, câu lệnh

const err = Error["Something bad happened!"];

29 chạy bất kể kết quả của hàm. dù thất bại hay thành công, mọi mã bên trong

const err = Error["Something bad happened!"];

29 sẽ chạy

Nhớ lại.

const err = Error["Something bad happened!"];

26 là một cấu trúc đồng bộ. giờ đây nó có cách để bắt các ngoại lệ đến từ mã không đồng bộ

Xử lý lỗi cho các chức năng của trình tạo

Hàm tạo trong JavaScript là một loại hàm đặc biệt

Nó có thể được tạm dừng và tiếp tục theo ý muốn, ngoài việc cung cấp kênh liên lạc hai chiều giữa phạm vi bên trong của nó và người tiêu dùng

Để tạo hàm tạo, chúng tôi đặt dấu sao

const err = Error["Something bad happened!"];

32 sau từ khóa

const err = Error["Something bad happened!"];

33

const err = Error["Something bad happened!"];

9

Khi đã ở trong hàm, chúng ta có thể sử dụng

const err = Error["Something bad happened!"];

34 để trả về giá trị

Uncaught DOMException: Node.appendChild: May not add a Document as a child

00

Giá trị trả về từ hàm tạo là một đối tượng lặp. Để lấy các giá trị ra khỏi trình tạo, chúng ta có thể sử dụng hai cách tiếp cận

• gọi

  const err = Error["Something bad happened!"];

  35 trên đối tượng iterator
• lặp lại với

  const err = Error["Something bad happened!"];

  36

Nếu chúng ta lấy ví dụ của mình, để lấy các giá trị từ trình tạo, chúng ta có thể làm

Uncaught DOMException: Node.appendChild: May not add a Document as a child

01

Ở đây

const err = Error["Something bad happened!"];

37 trở thành đối tượng iterator của chúng ta khi chúng ta gọi hàm tạo

Từ giờ trở đi, chúng ta có thể gọi

const err = Error["Something bad happened!"];

38 để tiến hành thực hiện

Uncaught DOMException: Node.appendChild: May not add a Document as a child

02

Máy phát điện cũng hoạt động theo cách khác. họ có thể chấp nhận các giá trị và ngoại lệ từ người gọi

Ngoài

const err = Error["Something bad happened!"];

35, các đối tượng trình vòng lặp được trả về từ trình tạo có phương thức

const err = Error["Something bad happened!"];

40

Với phương pháp này, chúng ta có thể tạm dừng chương trình bằng cách đưa một ngoại lệ vào trình tạo

Uncaught DOMException: Node.appendChild: May not add a Document as a child

03

Để bắt lỗi như vậy, bạn sẽ bọc mã của mình bên trong trình tạo bằng

const err = Error["Something bad happened!"];

41 [và

const err = Error["Something bad happened!"];

29 nếu cần]

Uncaught DOMException: Node.appendChild: May not add a Document as a child

04

Hàm tạo cũng có thể ném ngoại lệ ra bên ngoài. Cơ chế bắt các ngoại lệ này giống như cơ chế bắt các ngoại lệ đồng bộ.

const err = Error["Something bad happened!"];

26

Đây là một ví dụ về hàm tạo được sử dụng từ bên ngoài với

const err = Error["Something bad happened!"];

36

Uncaught DOMException: Node.appendChild: May not add a Document as a child

05

Ở đây chúng tôi lặp lại con đường hạnh phúc bên trong một khối

const err = Error["Something bad happened!"];

27. Nếu có bất kỳ trường hợp ngoại lệ nào xảy ra, chúng tôi sẽ dừng nó bằng

const err = Error["Something bad happened!"];

28

Xử lý lỗi không đồng bộ

JavaScript về bản chất là đồng bộ, là một ngôn ngữ đơn luồng

Các môi trường lưu trữ như công cụ trình duyệt tăng cường JavaScript bằng một số API Web để tương tác với các hệ thống bên ngoài và để xử lý các hoạt động liên kết I/O

Ví dụ về tính không đồng bộ trong trình duyệt là thời gian chờ, sự kiện, Lời hứa

Xử lý lỗi trong thế giới không đồng bộ khác với đối tác đồng bộ của nó

Hãy xem một số ví dụ

Xử lý lỗi cho bộ hẹn giờ

Khi bắt đầu khám phá JavaScript, sau khi tìm hiểu về

const err = Error["Something bad happened!"];

26, bạn có thể muốn đặt nó xung quanh bất kỳ khối mã nào

Hãy xem xét đoạn mã sau

Uncaught DOMException: Node.appendChild: May not add a Document as a child

06

Chức năng này ném sau khoảng 1 giây. Cách đúng để xử lý ngoại lệ này là gì?

Ví dụ sau không hoạt động

Uncaught DOMException: Node.appendChild: May not add a Document as a child

07

Như chúng tôi đã nói,

const err = Error["Something bad happened!"];

41 là đồng bộ. Mặt khác, chúng tôi có

const err = Error["Something bad happened!"];

49, API trình duyệt dành cho bộ hẹn giờ

Vào thời điểm cuộc gọi lại được chuyển cho

const err = Error["Something bad happened!"];

49 chạy, thì

const err = Error["Something bad happened!"];

41 của chúng tôi đã hết từ lâu. Chương trình sẽ gặp sự cố vì chúng tôi không nắm bắt được ngoại lệ

Họ đi trên hai con đường khác nhau

Uncaught DOMException: Node.appendChild: May not add a Document as a child

08

Nếu chúng tôi không muốn làm hỏng chương trình, để xử lý lỗi một cách chính xác, chúng tôi phải di chuyển

const err = Error["Something bad happened!"];

41 bên trong cuộc gọi lại cho

const err = Error["Something bad happened!"];

49

Nhưng, cách tiếp cận này không có nhiều ý nghĩa trong hầu hết thời gian. Như chúng ta sẽ thấy ở phần sau, việc xử lý lỗi không đồng bộ với Promise mang lại một công thái học tốt hơn.

Xử lý lỗi cho các sự kiện

Các nút HTML trong Mô hình đối tượng tài liệu được kết nối với

const err = Error["Something bad happened!"];

54, tổ tiên chung cho bất kỳ trình phát sự kiện nào trong trình duyệt

Điều đó có nghĩa là chúng ta có thể lắng nghe các sự kiện trên bất kỳ phần tử HTML nào trong trang

[Nút. js sẽ hỗ trợ

const err = Error["Something bad happened!"];

54 trong bản phát hành trong tương lai]

Cơ chế xử lý lỗi cho các sự kiện DOM tuân theo cùng một lược đồ của bất kỳ API Web không đồng bộ nào

Xem xét ví dụ sau

Uncaught DOMException: Node.appendChild: May not add a Document as a child

09

Ở đây chúng tôi đưa ra một ngoại lệ ngay khi nút được nhấp. Làm thế nào để chúng ta bắt nó?

const err = Error["Something bad happened!"];

80

Như với ví dụ trước với

const err = Error["Something bad happened!"];

49, bất kỳ cuộc gọi lại nào được chuyển đến

const err = Error["Something bad happened!"];

57 đều được thực thi không đồng bộ

const err = Error["Something bad happened!"];

81

Nếu chúng tôi không muốn làm hỏng chương trình, để xử lý lỗi một cách chính xác, chúng tôi phải di chuyển

const err = Error["Something bad happened!"];

41 bên trong cuộc gọi lại cho

const err = Error["Something bad happened!"];

57

Nhưng một lần nữa, có rất ít giá trị khi làm điều này

Như với

const err = Error["Something bad happened!"];

49, ngoại lệ được ném bởi đường dẫn mã không đồng bộ sẽ không thể bắt được từ bên ngoài và sẽ làm hỏng chương trình của bạn

Trong các phần tiếp theo, chúng ta sẽ xem cách Promise và

const err = Error["Something bad happened!"];

61 có thể dễ dàng xử lý lỗi đối với mã không đồng bộ

Làm thế nào về onerror?

Các phần tử HTML có một số trình xử lý sự kiện như

const err = Error["Something bad happened!"];

62,

const err = Error["Something bad happened!"];

63,

const err = Error["Something bad happened!"];

64 để đặt tên cho một số

Ngoài ra còn có

const err = Error["Something bad happened!"];

65, nhưng không liên quan gì đến

const err = Error["Something bad happened!"];

19 và các bạn

Trình xử lý sự kiện

const err = Error["Something bad happened!"];

65 kích hoạt bất kỳ lúc nào một phần tử HTML như thẻ

const err = Error["Something bad happened!"];

68 hoặc

const err = Error["Something bad happened!"];

69 chạm vào tài nguyên không tồn tại

Xem xét ví dụ sau

const err = Error["Something bad happened!"];

82

Khi truy cập tài liệu HTML có tài nguyên bị thiếu hoặc không tồn tại, bảng điều khiển của trình duyệt sẽ ghi lại lỗi

const err = Error["Something bad happened!"];

83

Trong JavaScript của chúng tôi, chúng tôi có cơ hội "bắt" lỗi này bằng trình xử lý sự kiện thích hợp

const err = Error["Something bad happened!"];

84

Hoặc tốt hơn

const err = Error["Something bad happened!"];

85

Mẫu này hữu ích để tải các tài nguyên thay thế thay cho hình ảnh hoặc tập lệnh bị thiếu

Nhưng hãy nhớ.

const err = Error["Something bad happened!"];

65, không liên quan gì đến

const err = Error["Something bad happened!"];

19 hoặc

const err = Error["Something bad happened!"];

41

Xử lý lỗi với Promise

Để minh họa việc xử lý lỗi với Promise, chúng tôi sẽ "promisify" một trong những ví dụ ban đầu của chúng tôi. Chúng tôi tinh chỉnh chức năng sau

const err = Error["Something bad happened!"];

4

Thay vì trả về một chuỗi đơn giản hoặc một ngoại lệ, chúng tôi sử dụng

const err = Error["Something bad happened!"];

73 và

const err = Error["Something bad happened!"];

74 tương ứng để xử lý lỗi và thành công

const err = Error["Something bad happened!"];

87

[Về mặt kỹ thuật, không có gì là không đồng bộ trong mã này, nhưng nó phục vụ tốt để minh họa điểm]

Bây giờ hàm đã được "promisified", chúng ta có thể đính kèm

const err = Error["Something bad happened!"];

75 để sử dụng kết quả và

const err = Error["Something bad happened!"];

28 để xử lý Lời hứa bị từ chối

const err = Error["Something bad happened!"];

88

Mã này sẽ đăng nhập

const err = Error["Something bad happened!"];

89

Trong lĩnh vực Promise,

const err = Error["Something bad happened!"];

28 là cấu trúc để xử lý lỗi

Ngoài

const err = Error["Something bad happened!"];

28 và

const err = Error["Something bad happened!"];

75 chúng ta còn có

const err = Error["Something bad happened!"];

29, tương tự như

const err = Error["Something bad happened!"];

29 trong

const err = Error["Something bad happened!"];

41

Là "họ hàng" đồng bộ của nó, Promise's

const err = Error["Something bad happened!"];

29 chạy bất kể kết quả của Promise là gì

Uncaught DOMException: Node.appendChild: May not add a Document as a child

00

Luôn ghi nhớ rằng bất kỳ cuộc gọi lại nào được chuyển đến

const err = Error["Something bad happened!"];

84 đều được xử lý không đồng bộ bởi Hàng đợi Microtask. Chúng là các tác vụ vi mô được ưu tiên hơn các tác vụ vĩ mô, chẳng hạn như các sự kiện và bộ hẹn giờ

Lời hứa, lỗi và ném

Như một phương pháp hay nhất khi từ chối một Lời hứa, thật tiện lợi khi cung cấp một đối tượng lỗi

Uncaught DOMException: Node.appendChild: May not add a Document as a child

01

Bằng cách đó, bạn giữ cho việc xử lý lỗi nhất quán thông qua cơ sở mã. Các thành viên khác trong nhóm luôn có thể truy cập vào

const err = Error["Something bad happened!"];

20 và quan trọng hơn là bạn có thể kiểm tra dấu vết ngăn xếp

Ngoài

const err = Error["Something bad happened!"];

73, chúng ta có thể thoát khỏi Promise chain bằng cách ném một ngoại lệ

Xem xét ví dụ sau

Uncaught DOMException: Node.appendChild: May not add a Document as a child

02

Chúng tôi giải quyết một Lời hứa bằng một chuỗi và sau đó chuỗi bị phá vỡ ngay lập tức với

const err = Error["Something bad happened!"];

19

Để ngăn chặn việc lan truyền ngoại lệ, chúng tôi sử dụng

const err = Error["Something bad happened!"];

28, như thường lệ

Uncaught DOMException: Node.appendChild: May not add a Document as a child

03

Mẫu này phổ biến trong

const err = Error["Something bad happened!"];

89, nơi chúng tôi kiểm tra đối tượng phản hồi để tìm lỗi

Uncaught DOMException: Node.appendChild: May not add a Document as a child

04

Ở đây, ngoại lệ có thể bị chặn bằng

const err = Error["Something bad happened!"];

28. Nếu chúng tôi thất bại hoặc quyết định không bắt nó ở đó, ngoại lệ sẽ tự do nổi lên trong ngăn xếp

Bản thân điều này không tệ, nhưng các môi trường khác nhau sẽ phản ứng khác nhau đối với các lần từ chối chưa được xử lý

Nút. js chẳng hạn trong tương lai sẽ làm sập bất kỳ chương trình nào mà từ chối Promise không được xử lý

Uncaught DOMException: Node.appendChild: May not add a Document as a child

05

Tốt hơn bạn nên bắt chúng

Xử lý lỗi cho bộ hẹn giờ "được hứa hẹn"

Với bộ hẹn giờ hoặc sự kiện, không thể bắt ngoại lệ từ cuộc gọi lại. Chúng ta đã thấy một ví dụ trong phần trước

Uncaught DOMException: Node.appendChild: May not add a Document as a child

06

Một giải pháp do Promise cung cấp bao gồm việc "quảng cáo" mã của chúng tôi. Về cơ bản, chúng tôi kết thúc bộ đếm thời gian của mình bằng một Lời hứa

Uncaught DOMException: Node.appendChild: May not add a Document as a child

07

Với

const err = Error["Something bad happened!"];

91, chúng tôi bắt đầu từ chối Promise, mang đối tượng lỗi

Tại thời điểm này, chúng ta có thể xử lý ngoại lệ với

const err = Error["Something bad happened!"];

28

Uncaught DOMException: Node.appendChild: May not add a Document as a child

08

Ghi chú. thường sử dụng

const err = Error["Something bad happened!"];

93 làm giá trị trả về từ Lời hứa và

const err = Error["Something bad happened!"];

94 làm đối tượng trả về từ một từ chối

Nút. js có một tiện ích gọi là promisify để giảm bớt việc "quảng cáo" các API gọi lại kiểu cũ

Xử lý lỗi trong Promise. tất cả các

Phương thức tĩnh

const err = Error["Something bad happened!"];

95 chấp nhận một mảng Lời hứa và trả về một mảng kết quả từ tất cả các Lời hứa đang giải quyết

Uncaught DOMException: Node.appendChild: May not add a Document as a child

09

Nếu bất kỳ Lời hứa nào trong số này bị từ chối, thì

const err = Error["Something bad happened!"];

95 sẽ từ chối với lỗi từ Lời hứa bị từ chối đầu tiên

Để xử lý những tình huống này trong

const err = Error["Something bad happened!"];

95, chúng tôi sử dụng

const err = Error["Something bad happened!"];

28, như chúng tôi đã làm trong phần trước

Uncaught DOMException: Node.appendChild: May not add a Document as a child

30

Để chạy một chức năng bất kể kết quả của

const err = Error["Something bad happened!"];

95, một lần nữa, chúng ta có thể sử dụng

const err = Error["Something bad happened!"];

29

Uncaught DOMException: Node.appendChild: May not add a Document as a child

31

Xử lý lỗi trong Promise. không tí nào

Chúng ta có thể coi

Uncaught DOMException: Node.appendChild: May not add a Document as a child

001 [Firefox > 79, Chrome > 85] đối lập với

const err = Error["Something bad happened!"];

95

Trong khi

const err = Error["Something bad happened!"];

95 trả về lỗi ngay cả khi một Lời hứa duy nhất trong mảng bị từ chối, thì

Uncaught DOMException: Node.appendChild: May not add a Document as a child

001 luôn cung cấp cho chúng ta Lời hứa được giải quyết đầu tiên [nếu có trong mảng] bất kể có bất kỳ sự từ chối nào xảy ra

Trong trường hợp thay vào đó, tất cả Lời hứa được chuyển đến

Uncaught DOMException: Node.appendChild: May not add a Document as a child

001 từ chối, lỗi kết quả là một

const err = Error["Something bad happened!"];

14. Xem xét ví dụ sau

Uncaught DOMException: Node.appendChild: May not add a Document as a child

32

Ở đây chúng tôi xử lý lỗi với

const err = Error["Something bad happened!"];

28. Đầu ra của mã này là

Uncaught DOMException: Node.appendChild: May not add a Document as a child

33

Đối tượng

const err = Error["Something bad happened!"];

14 có cùng các thuộc tính của một

const wrongType = TypeError["Wrong type given, expected number"];

throw wrongType;

6 cơ bản, cộng với một thuộc tính

Uncaught DOMException: Node.appendChild: May not add a Document as a child

010

Uncaught DOMException: Node.appendChild: May not add a Document as a child

34

Thuộc tính này là một mảng của từng lỗi riêng lẻ do từ chối tạo ra

Uncaught DOMException: Node.appendChild: May not add a Document as a child

35

Xử lý lỗi trong Promise. cuộc đua

Phương thức tĩnh

Uncaught DOMException: Node.appendChild: May not add a Document as a child

011 chấp nhận một mảng Promise

Uncaught DOMException: Node.appendChild: May not add a Document as a child

36

Kết quả Promise đầu tiên là người chiến thắng trong "cuộc đua"

Làm thế nào về từ chối sau đó?

Uncaught DOMException: Node.appendChild: May not add a Document as a child

37

Thay vào đó, nếu từ chối xuất hiện dưới dạng phần tử đầu tiên của mảng, thì

Uncaught DOMException: Node.appendChild: May not add a Document as a child

011 từ chối và chúng ta phải nắm bắt được từ chối

Uncaught DOMException: Node.appendChild: May not add a Document as a child

38

Xử lý lỗi trong Promise. Tất cả đều ổn định

Uncaught DOMException: Node.appendChild: May not add a Document as a child

014 là một bổ sung ECMAScript 2020 cho ngôn ngữ

Không có quá nhiều thứ để xử lý với phương thức tĩnh này vì kết quả sẽ luôn là một Lời hứa đã được giải quyết, ngay cả khi một hoặc nhiều Lời hứa đầu vào bị từ chối

Xem xét ví dụ sau

Uncaught DOMException: Node.appendChild: May not add a Document as a child

39

Chúng tôi chuyển đến

Uncaught DOMException: Node.appendChild: May not add a Document as a child

014 một mảng bao gồm hai Lời hứa. một giải quyết và một từ chối khác

Trong trường hợp này,

const err = Error["Something bad happened!"];

28 sẽ không bao giờ bị đánh.

const err = Error["Something bad happened!"];

29 thay vì chạy

Kết quả của mã này, đăng nhập vào

const err = Error["Something bad happened!"];

75 là

Uncaught DOMException: Node.appendChild: May not add a Document as a child

50

Xử lý lỗi cho async/await

const err = Error["Something bad happened!"];

61 trong JavaScript biểu thị các hàm không đồng bộ, nhưng từ quan điểm của người đọc, chúng được hưởng lợi từ tất cả khả năng đọc của các hàm đồng bộ

Để đơn giản, chúng ta sẽ sử dụng hàm đồng bộ trước đó là

const err = Error["Something bad happened!"];

22 và chuyển đổi nó thành hàm không đồng bộ bằng cách đặt

const err = Error["Something bad happened!"];

12 trước từ khóa

const err = Error["Something bad happened!"];

33

Uncaught DOMException: Node.appendChild: May not add a Document as a child

51

Chỉ bằng cách thêm tiền tố vào một hàm với

const err = Error["Something bad happened!"];

12, chúng ta sẽ khiến hàm trả về một Lời hứa. Điều đó có nghĩa là chúng ta có thể xâu chuỗi

const err = Error["Something bad happened!"];

75,

const err = Error["Something bad happened!"];

28 và

const err = Error["Something bad happened!"];

29 sau khi gọi hàm

Uncaught DOMException: Node.appendChild: May not add a Document as a child

52

Khi chúng ta ném từ hàm

const err = Error["Something bad happened!"];

12, ngoại lệ sẽ trở thành nguyên nhân từ chối đối với Lời hứa cơ bản

Bất kỳ lỗi nào cũng có thể bị chặn bằng

const err = Error["Something bad happened!"];

28 từ bên ngoài

Quan trọng nhất, ngoài phong cách này, chúng ta có thể sử dụng

const err = Error["Something bad happened!"];

26, giống như cách chúng ta làm với hàm đồng bộ

Trong ví dụ sau, chúng ta gọi hàm

const err = Error["Something bad happened!"];

22 từ một hàm khác,

Uncaught DOMException: Node.appendChild: May not add a Document as a child

031, hàm này kết thúc lời gọi hàm một cách thuận tiện bằng

const err = Error["Something bad happened!"];

26

Uncaught DOMException: Node.appendChild: May not add a Document as a child

53

đầu ra là

Uncaught DOMException: Node.appendChild: May not add a Document as a child

54

Cùng chủ đề. Làm cách nào để loại bỏ lỗi từ các hàm không đồng bộ trong JavaScript?

Xử lý lỗi cho trình tạo không đồng bộ

Trình tạo không đồng bộ trong JavaScript là các hàm tạo có khả năng mang lại Lời hứa thay vì các giá trị đơn giản

Họ kết hợp các hàm tạo với

const err = Error["Something bad happened!"];

12. Kết quả là một hàm trình tạo có các đối tượng trình vòng lặp hiển thị Lời hứa cho người tiêu dùng

Để tạo một trình tạo không đồng bộ, chúng tôi khai báo một hàm tạo với dấu sao

const err = Error["Something bad happened!"];

32, có tiền tố là

const err = Error["Something bad happened!"];

12

Uncaught DOMException: Node.appendChild: May not add a Document as a child

55

Dựa trên Promise, các quy tắc xử lý lỗi tương tự được áp dụng tại đây.

const err = Error["Something bad happened!"];

19 bên trong trình tạo không đồng bộ gây ra từ chối Promise mà chúng tôi chặn bằng

const err = Error["Something bad happened!"];

28

Để rút Promise ra khỏi trình tạo không đồng bộ, chúng ta có thể sử dụng hai cách tiếp cận

• Trình xử lý

  const err = Error["Something bad happened!"];

  75
• lặp lại không đồng bộ

Từ ví dụ trên, chúng tôi biết chắc chắn sẽ có một ngoại lệ sau hai

const err = Error["Something bad happened!"];

34 đầu tiên. Điều này có nghĩa là chúng ta có thể làm

Uncaught DOMException: Node.appendChild: May not add a Document as a child

56

Đầu ra từ mã này là

Uncaught DOMException: Node.appendChild: May not add a Document as a child

57

Cách tiếp cận khác sử dụng phép lặp không đồng bộ với

Uncaught DOMException: Node.appendChild: May not add a Document as a child

040. Để sử dụng phép lặp không đồng bộ, chúng ta cần bao bọc người tiêu dùng bằng hàm

const err = Error["Something bad happened!"];

12

Đây là ví dụ hoàn chỉnh

Uncaught DOMException: Node.appendChild: May not add a Document as a child

58

Và như với

const err = Error["Something bad happened!"];

61, chúng tôi xử lý bất kỳ ngoại lệ tiềm ẩn nào với

const err = Error["Something bad happened!"];

41

Uncaught DOMException: Node.appendChild: May not add a Document as a child

59

Đầu ra của mã này là

Uncaught DOMException: Node.appendChild: May not add a Document as a child

10

Đối tượng iterator được trả về từ hàm tạo không đồng bộ cũng có phương thức

const err = Error["Something bad happened!"];

40, giống như đối tượng đồng bộ của nó

Gọi

const err = Error["Something bad happened!"];

40 trên đối tượng iterator ở đây sẽ không đưa ra ngoại lệ, nhưng từ chối Promise

Uncaught DOMException: Node.appendChild: May not add a Document as a child

11

Để xử lý tình huống này từ bên ngoài chúng ta có thể làm

Uncaught DOMException: Node.appendChild: May not add a Document as a child

12

Nhưng đừng quên rằng các đối tượng trình vòng lặp

const err = Error["Something bad happened!"];

40 gửi ngoại lệ bên trong trình tạo. Điều này có nghĩa là chúng ta cũng có thể áp dụng mẫu sau

Uncaught DOMException: Node.appendChild: May not add a Document as a child

13

Xử lý lỗi trong Node. js

Xử lý lỗi đồng bộ trong Node. js

Xử lý lỗi đồng bộ trong Node. js không khác quá nhiều so với những gì chúng ta đã thấy cho đến nay

Đối với mã đồng bộ,

const err = Error["Something bad happened!"];

26 hoạt động tốt

Tuy nhiên, mọi thứ trở nên thú vị nếu chúng ta lướt qua thế giới không đồng bộ

Xử lý lỗi không đồng bộ trong Node. js. mô hình gọi lại

Đối với mã không đồng bộ, Nút. js phụ thuộc rất nhiều vào hai thành ngữ

• mô hình gọi lại
• bộ phát sự kiện

Trong mẫu gọi lại, Nút không đồng bộ. js API chấp nhận một chức năng được xử lý thông qua vòng lặp sự kiện và được thực thi ngay khi ngăn xếp cuộc gọi trống

Hãy xem xét đoạn mã sau

Uncaught DOMException: Node.appendChild: May not add a Document as a child

14

Nếu chúng tôi trích xuất cuộc gọi lại từ danh sách này, chúng tôi có thể thấy cách xử lý lỗi

Uncaught DOMException: Node.appendChild: May not add a Document as a child

15

Nếu có bất kỳ lỗi nào phát sinh từ việc đọc đường dẫn đã cho với

Uncaught DOMException: Node.appendChild: May not add a Document as a child

048, chúng tôi sẽ nhận được một đối tượng lỗi

Tại thời điểm này chúng ta có thể

• chỉ cần đăng nhập đối tượng lỗi như chúng tôi đã làm
• ném một ngoại lệ
• chuyển lỗi cho một cuộc gọi lại khác

Để ném một ngoại lệ chúng ta có thể làm

Uncaught DOMException: Node.appendChild: May not add a Document as a child

16

Tuy nhiên, cũng giống như các sự kiện và bộ hẹn giờ trong DOM, ngoại lệ này sẽ làm hỏng chương trình. Nỗ lực sau đây để ngăn chặn nó bằng

const err = Error["Something bad happened!"];

41 sẽ không hiệu quả

Uncaught DOMException: Node.appendChild: May not add a Document as a child

17

Chuyển lỗi cho một cuộc gọi lại khác là tùy chọn ưu tiên, nếu chúng tôi không muốn làm hỏng chương trình

Uncaught DOMException: Node.appendChild: May not add a Document as a child

18

Đây là tên gọi của

Uncaught DOMException: Node.appendChild: May not add a Document as a child

050, một chức năng đơn giản để xử lý lỗi

Uncaught DOMException: Node.appendChild: May not add a Document as a child

19

Xử lý lỗi không đồng bộ trong Node. js. bộ phát sự kiện

Phần lớn những gì bạn làm trong Node. js dựa trên các sự kiện. Hầu hết các lần bạn tương tác với một đối tượng phát và một số người quan sát đang nghe tin nhắn

Bất kỳ mô-đun hướng sự kiện nào [ví dụ như mạng] trong Nút. js mở rộng một lớp gốc có tên là

Uncaught DOMException: Node.appendChild: May not add a Document as a child

051

Uncaught DOMException: Node.appendChild: May not add a Document as a child

051 trong nút. js có hai phương thức cơ bản.

Uncaught DOMException: Node.appendChild: May not add a Document as a child

053 và

Uncaught DOMException: Node.appendChild: May not add a Document as a child

054

Hãy xem xét máy chủ HTTP đơn giản này

Uncaught DOMException: Node.appendChild: May not add a Document as a child

0

Ở đây chúng tôi lắng nghe hai sự kiện. lắng nghe và kết nối

Ngoài các sự kiện này, trình phát sự kiện cũng hiển thị một sự kiện lỗi, được kích hoạt trong trường hợp có lỗi

Nếu bạn chạy mã này nghe trên cổng 80 thay vì ví dụ trước, bạn sẽ nhận được một ngoại lệ

Uncaught DOMException: Node.appendChild: May not add a Document as a child

1

đầu ra

Uncaught DOMException: Node.appendChild: May not add a Document as a child

2

Để bắt nó, chúng ta có thể đăng ký một trình xử lý sự kiện cho lỗi

Uncaught DOMException: Node.appendChild: May not add a Document as a child

3

Điều này sẽ in

Uncaught DOMException: Node.appendChild: May not add a Document as a child

4

Ngoài ra, chương trình sẽ không bị sập

Để tìm hiểu thêm về chủ đề này, hãy cân nhắc đọc thêm "Xử lý lỗi trong Node. js"

kết thúc

Trong hướng dẫn này, chúng tôi đã đề cập đến việc xử lý lỗi trong JavaScript cho toàn bộ phạm vi, từ mã đồng bộ đơn giản đến các nguyên hàm không đồng bộ nâng cao

Có nhiều cách mà một ngoại lệ có thể hiển thị trong các chương trình JavaScript của chúng tôi

Các ngoại lệ từ mã đồng bộ là dễ bắt nhất. Thay vào đó, các ngoại lệ từ các đường dẫn mã không đồng bộ có thể khó xử lý

Trong thời gian chờ đợi, các API JavaScript mới trong trình duyệt hầu hết đều hướng tới

Uncaught DOMException: Node.appendChild: May not add a Document as a child

055. Mẫu phổ biến này giúp xử lý các trường hợp ngoại lệ dễ dàng hơn với

const err = Error["Something bad happened!"];

84 hoặc với

const err = Error["Something bad happened!"];

41 cho

const err = Error["Something bad happened!"];

61

Sau khi đọc hướng dẫn này, bạn sẽ có thể nhận ra tất cả các tình huống khác nhau có thể phát sinh trong chương trình của mình và nắm bắt các ngoại lệ một cách chính xác

Bắt lỗi trong JavaScript là gì?

Lỗi bảng điều khiển có trở lại không?

Bạn có thể đưa ra lỗi trong khối bắt JavaScript không?