在开发前端项目时，我们常常需要进行错误处理。这些错误处理可能会包含大量的相似代码，造成代码的冗余和不易维护。为了解决这个问题，ECMAScript 引入了可选捕获绑定以简化错误处理。可是，当前浏览器对可选捕获绑定的支持还不完善，这也意味着你不能在所有浏览器上随意使用它。幸好，npm 包 @gerhobbelt/babel-plugin-syntax-optional-catch-binding 能为你实现可选捕获绑定的操作。
安装
npm install @gerhobbelt/babel-plugin-syntax-optional-catch-binding --save-dev
使用
在你的 .babelrc 或 babel 配置文件中添加这个插件：
{
"plugins": ["@gerhobbelt/babel-plugin-syntax-optional-catch-binding"]
}之后你的代码就可以像下面这样使用可选捕获绑定：
-- -------------------- ---- -------
--- -
-- ---- ---- ---- --- -----
- ----- ------- -
--- ----
-- ---------- ---- ----- -- --- -- -- -- -------
-- ------- ----- --- ------------ -
--- - ------
-
-使用了 @gerhobbelt/babel-plugin-syntax-optional-catch-binding 插件后，上述代码可以被转成：
try {
// some code that may throw
} catch {
let foo;
// optionally bind error to foo if it is defined
foo = $UncaughtException;
}在上面的代码中，catch 后面不需要再加上括号和异常参数，插件会自动处理。
示例
下面介绍一个使用可选捕获绑定的示例。
-- -------------------- ---- -------
--- -
----- --- ----------- --------
- ----- ------- -
-------------------
-
--- -
----- --- ----------- --------
- ----- -
------------------ -----------
-
--- -
-- ---- ---- ---- --- -----
- ----- ------- -
--- ----
-- ---------- ---- ----- -- --- -- -- -- -------
-- ------- ----- --- ------------ -
--- - ------
-
-上面的代码中，第一种方式是传统方式，使用异常参数来处理错误。第二种方式使用了可选捕获绑定来处理错误。第三种方式在可选捕获绑定的基础上增加了对异常参数的自定义处理。
结论
@gerhobbelt/babel-plugin-syntax-optional-catch-binding 插件大大简化了可选捕获绑定的使用，使我们可以更加容易地进行错误处理。虽然该特性尚未被所有浏览器完美支持，但使用该插件可以在旧版浏览器上使用该特性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f02d7ab403f2923b035bdba