慎用 JavaScript 中的 try catch

Question

ECMA-262 第3版 引入了 try catch 语句，作为 JavaScript 中处理异常的一种标准方式。基本的语法如下所示。 但是在前端 js 代码中很少看到 try catch 语句，并不是所以代码都需要加 try catch 来作得不偿失的 保险，下面来分析作为前端代码，哪些地方才需要真正加 try catch 。

一、try catch 语法

try {
  //可能会导致错误的代码
} catch (error) {
  //在错误发生时怎么处理
}finally {
   //即使报错始终执行
}

二、try catch 缺点

1.try catch 耗性能

众所周知， js 以一个大括号{}决定一个块级作用域，代码进入 try catch 的时候 js引擎会拷贝当前的词法环境，拷贝的其实就是当前 scope 下的所有的变量，这样消耗的性能是很大的，性能消耗与 try catch 代码量以及变量成正比。

2.try catch 捕获不到异步错误

尝试对异步方法进行 try catch 操作只能捕获当次事件循环内的异常，对call back执行时抛出的异常将无能为力。

try {
  setTimeout(()=>{
    const A = 1
    A = 2
  },0)
} catch (e) {
  // 这里并不能捕获回调里面抛出的异常
  console.log("-----catch error------")
  console.log(e)
}

3.try catch 可能会导致报错点更模糊

try catch 语句中报错直接到 catch 中处理，而浏览器控制台看不到报错信息。但很多人并没有在 catch 中抛出报错信息，或改写成自己随意写的报错文言，这样其实不如直接看浏览器原生的报错修改bug更方便。

三、try catch 总结

说了这么多 try catch 的缺点，有些小伙伴们就会奇怪到里那里用 try catch 比较合适呢？

try catch 最适合处理那些我们无法控制的错误，如 I/O 操作，后端 java 读取 I/O 操作比较多比如读数据库，所以用 try catch 比较多。前端可以用在上传图片或 async await 同步调接口。

async function f() {
  try {
  await Promise.reject('出错了');
  } catch(e) {
  }
  return await Promise.resolve('hello world');
}

但是大部分前端代码处理都不怎么依赖环境也没有 I/O 操作，都是自己写的代码，在明明白白地知道自己的代码会发生错误时，再使用 try catch 语句就不太合适了，所以慎用 try catch。

参考资料

• raoenhui.github.io/js/2018/12/…
• www.jb51.net/article/101…
• es6.ruanyifeng.com/#docs/async