try里面的值不能全局使用吗_try...catch 的异常处理

try...catch 指定的 try 语句块中，如果出现异常就传递到 catch 里面去。并由 catch 来处理发生的错误。

try {  nonExistentFunction();} catch (error) {  console.error(error);  // ReferenceError: nonExistentFunction is not defined}

在项目中，我使用了 axios 库，里面封装了 Request 请求，如果请求中接口出现了错误，我会抛出异常，然后在 catch 里捕获到它，再然后我可以把报错传递出去，上报到错误日志里(目前没做)，后期修复 Bug 来保证项目的健壮性。try...catch 主要目的是抛出错误「并且处理错误」，后面这个「并且处理错误」十分重要。因为 try...catch 是为了系统更稳定才加进去的逻辑，如果不处理错误，那前面 try 里抛出的错误，catch 里捕获的错误，相当于白做工作了，并且还白白浪费了性能。对于 try 来讲，只要有报错程序就会中断执行，从报错位置开始中断代码执行，直到报错位置所在的作用域结束。 如果报错位置后面还有很重要的代码需要执行，需要在 catch 里面执行一下必要逻辑。如果害怕 try 里拿不到错误，或者是说拿到错误后，不能很好的处理，怕耽误其他函数的执行，也可以放在 finally 里执行，不论 try 里面的代码是否报错，也不论 catch 是否处理，finally 里的程序都是会执行的。

try {  nonExistentFunction();} catch (error) {  console.error(error);  // ReferenceError: nonExistentFunction is not defined} finally {  console.log('无论如何，我都执行。')}

使用 finally 有个逻辑需要注意一下：如果 try 里有 return 语句，是先执行 finally 里的代码，然后才会返回 try 里面 return 的值。如果在写 try...catch 的时候，只抛出异常，并不输出关于报错的详细信息，也不处理异常，那写多少 try...catch 也没用。try...catch 里的 catch 是为了捕获 try 里面语句「执行出问题时」设计的，所以，建议在 catch 里清楚、详细、认真写错误处理逻辑，这样就能保证程序的稳定性以及健壮性。反过来说，catch 里面执行的是你 try 想要的最终执行结果。try 没执行完，catch 里面收到报错后，尽量把 try 最终的结果去执行一下。try...catch 虽然好用，但...我不能在全局各个地方来写 try...catch 吧？这不现实。所以，我们还有其他办法，我们可以使用 window 自带的方法来处理 other 报错信息。当 JavaScript 运行时错误(包括语法错误)发生时，window 会触发一个 ErrorEvent 接口的 error 事件，并执行 window.onerror()。 ‍

//message：错误信息(字符串)。//source：发生错误的脚本URL(字符串)//lineno：发生错误的行号(数字)//colno：发生错误的列号(数字)//error：Error对象(对象)window.onerror = function(errorMessage, scriptURI, lineNumber,columnNumber,errorObj) {   console.log("错误信息：" , errorMessage);   console.log("出错文件：" , scriptURI);   console.log("出错行号：" , lineNumber);   console.log("出错列号：" , columnNumber);   console.log("错误详情：" , errorObj);}

如果一张静态图片加载的时候没有加载成功，那就会触发图片的 onerror 方法。 静态资源加载失败了，可以监听 error 这个方法来处理。不同的浏览器之间返回的参数不一样，这个还需要兼容处理。

window.addEventListener('error', function(event) { ... },true)

一般的 JS 报错拿到了，静态资源的报错获取到了。用下面的方法可以监听 Promise 的异常。

window.addEventListener('unhandledrejection', event => {    console.log('unhandledrejection:' + event.reason); // 捕获后自定义处理});

如果自己处理的话，基本上这几种情况都包含了。想要更详细的处理，需要去找 JS 监控了，它们处理逻辑就是将所有能涉及到的函数都用  try...catch 封装一层。

类似的操作有 Vue 的 errorHandler 和 React 的 componentDidCatch，不管怎样抛出、捕获，最重要的还是监听 Bug、处理 Bug 来提升系统稳定性。

---

参考文档

https://blog.fundebug.com/2018/12/07/how-to-handle-frontend-error

https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onerror

https://www.baidufe.com/item/7ee009bfbcd0fe94bd3e.html

https://segmentfault.com/a/1190000014672384

---

图片授权基于 www.pixabay.com 相关协议

---