Custom Elements 是一种 Web 组件化技术，可以让前端工程师自定义 HTML 标签或者重写现有标签，来实现可复用、封装好的功能模块。在开发 Custom Elements 过程中，我们要考虑到它的错误与异常处理，这些处理不仅可以提高代码质量，还能优化用户体验。
错误与异常分类
在 Custom Elements 中，错误与异常有两种分类：
自定义错误：这些错误通常是由开发者在开发时预先考虑到的一系列错误场景，例如传入参数不合法、网络请求失败等。这些错误可以通过开发者的代码逻辑直接控制并进行处理。
系统错误：这些错误则是由系统自身产生的，例如 JavaScript 运行时出错、浏览器崩溃等。这些错误需要通过相应的方式向用户报错，或者做好异常兜底处理，避免应用出现致命问题。
如何处理错误与异常
- 使用 try-catch 捕获异常
在 Custom Elements 的开发中，我们通常需要捕获异步方法中的错误，例如异步请求数据失败时。这时候可以使用 try-catch 包裹异步方法，以便查找捕获具体错误信息。
-- -------------------- ---- -------
----- ----------- -
--- -
-- ------
----- -------- - ----- --------------------------------------
----- ---- - ----- ----------------
------ -----
- ----- ------- -
-------------------- ------ ---- ------- -------
-
-- 使用 console.error 报错
调试 Custom Elements 时，可以使用 console 方法打印错误信息。其中，console.error 会将错误信息打印在控制台上，并让开发人员便于查找和调试错误。比如，以下代码会在控制台上打印 "Invalid input"：
throw new Error("Invalid input");- 使用自定义错误
Custom Elements 也可以自定义对于开发过程中可能出现的错误。对于这样的 Custom Elements，在 Web Components 标准中，通过 throwError 和 show 方法定义了两种方法，让开发人员能够在开发中处理错误，并将其传递给其他开发者或用户。以下是一个简化的示例：
-- -------------------- ---- -------
----- ------ ------- ----------- -
------------- -
---------------- - ------
-- ---
-
------------------- -
----- ------------ - ------------------------------
------------------------ - --------
-------------------------------------------
------------------------------------------
---------------- - -----
-
------ -
-- ------------------ -
----- ----- - -----------------------------------------------
------------------- - --------
- ---- -
----- ----- - ---------------------------------------
------------------- - --------
-
-
-- ---
-在上面的代码中，我们定义了两个方法：throwError 和 show。throwError 方法会创建一个错误提示，根据具体的错误信息展示在 Custom Elements 中，并且通过 show 方法做出错误提示。show 方法会检验是否已经触发了错误，如果有错误则展示错误提示，否则则展示对应的输入框等。
自动异常兜底
处理 Custom Elements 中的错误是一个必须要注意的方面。但是，在错误处理中也会出现遗漏的情况。这时候，我们可以在 Custom Elements 中添加一个自动异常兜底机制。具体的示例如下：
-- -------------------- ---- -------
----- ------------- ------- ----------- -
------------- -
--------
-
------------------- -
--- -
-- -------------- -------- -- ------- -----
------------------------------------ ------------
----- -------- - ----- --------------------------------------
----- ---- - ----- ----------------
-- -------- ------ -------- ----
----------------
- ----- ------- -
-- -------- ------ -------- --------------------
-------------------- ------ ---- ------- -------
------------------------------------ -----------------
-
-
-- ---
-这段代码中，我们在 Custom Elements 的 connectedCallback 回调中发起异步请求数据，并在前端展示获取数据的过程信息。如果请求数据失败，则会自动展示错误信息，并提供联系开发者的方式。
总结
处理 Custom Elements 中的错误与异常，是为了保证代码质量和用户体验。在错误处理中，我们需要对错误分类（自定义错误和系统错误）并且运用不同的方法进行处理。同时，在异常兜底时，我们需要通过自动机制找到异常来避免因为意外异常而导致程序崩溃。有了这些处理，Custom Elements 的开发都将更加高效和可维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65040a6695b1f8cacd0c7400