ES10 中使用 try...catch 最简单和可读性最强的错误捕捉
在前端开发中，错误处理是非常重要的一个环节。但是错误处理并不是一个容易的任务。我们需要考虑到各种情况，如运行时出现的错误、用户输入有误、网络请求失败等等。为了降低代码出现错误的概率，我们可以在代码中加入错误处理，以保证代码的健壮性。而 try…catch 是 JavaScript 中最常用的错误处理方法之一。
try…catch 语法
-- -------------------- ---- -------
--- -
-- ----
- --------- -
-- -----
-try 语句块将需要被慢慢检查的代码放置在 {} 内，之后 JavaScript 解释器会尝试去解释这些代码。如果在代码执行期间发生了异常，JavaScript 解释器会停止尝试执行，和 “catch” 关键字后面的代码块将被执行。
catch 块只能够处理对应 try 块中出现的异常。一旦 catch 代码块执行完毕，程序会自动开始执行接下来的代码块。
try…catch 可读性优化
在 ES10 中，引入了一种新的语法来优化 try…catch 的可读性：optional catch binding。该语法提供了一种即使无论出现什么错误，都可以访问到错误对象的方法。它是这样工作的：
-- -------------------- ---- -------
--- -
-- ----
- ----- -
-- -----
-注意：我们将 catch 关键字后面的异常变量移除，并将花括号中的变量作为捕获到的错误对象。
try…catch 简化
如果您是一位 JavaScript 开发者并且已经熟悉了 try…catch 的语法，那么这种 optional catch binding 语法对您来说就是一种语法糖。它使代码更简洁并且提高了代码可读性。接下来，我们来对比一下传统的 try…catch 方法和使用 optional catch binding 语法的方法：
传统的 try…catch 语法
-- -------------------- ---- -------
--- -
-- ----
- ------------ -
---------------------
-新的 optional catch binding 语法
-- -------------------- ---- -------
--- -
-- ----
- ----- -
----------------------
-注意：两种方法都可以当做方式来处理传统的 try…catch，这意味着我们可以忽略错误变量名称。
警告:尽管推荐使用新的optional catch binding语法，但不推荐将catch块中的变量从源代码中删除。删除变量会导致无法诊断错误。
try…catch 示例
让我们通过一个使用 “try…catch” 语法示例来说明它。我们的示例中将抛出一个未捕捉到的错误，这时将引发异常。
const fs = require('fs-promise-native')
async function readJSON(filename) {
try {
let data = await fs.readFile(filename, 'utf8')
return JSON.parse(data)
}
catch (err) {
console.log('读取文件失败:' + err)
}
}
这个示例中，我们创建了一个 readJSON 的函数，该函数使用 await 关键字异步读取指定的文件并解析为 JSON 数据。如果 readFile 函数出现错误，将返回错误对象并被 catch 块捕获，然后将错误输出到控制台。
总结
try…catch 是一个能够在代码出现错误的情况下优雅地处理错误的语法结构。在 ES10 中，我们可以使用 optional catch binding 语法进一步简化这个过程。这个语法可以让你的代码更易读，同时仍然能够捕获错误，从而提高代码质量。如果您还没有使用 try…catch，那么现在是时候跟上最新的技术趋势了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647e9b1f48841e9894e4db07