Try/Catch应包裹函数内部代码还是函数调用？二者有区别吗？

二者核心差异 #

两种写法在语法层面的错误堆栈表现一致，核心差异体现在职责边界、控制权和适配场景上：

• 错误处理控制权不同
  写在函数内部相当于错误被函数自行消化，调用方无法感知错误发生，也无法做差异化处理；写在外层时错误会透传给调用方，调用方可根据自身业务需求灵活处理错误。
• 复用性适配不同
  通用工具类函数如果有统一的默认错误处理逻辑（比如统一日志上报、默认降级），内部包裹Try/Catch可以减少调用方的重复代码；业务逻辑类函数不同调用场景的错误处理逻辑差异大，更适合把错误抛给外层处理。
• 错误处理粒度不同
  当函数内部逻辑复杂，不同代码段的错误需要对应不同处理逻辑时，在函数内部拆分多个Try/Catch块分别处理是最优方案，不需要把所有错误都抛到外层增加调用方负担。

注意：如果同时在函数内部和外层调用处包裹Try/Catch块，错误会被更近的内层捕获逻辑优先处理，除非内层catch块主动执行throw e重新抛出错误，否则不会进入外层捕获逻辑。

选型参考标准 #

• 如果是通用工具函数，绝大多数调用场景下错误处理逻辑统一，优先内部捕获
• 如果是业务逻辑函数，不同调用场景的错误处理逻辑差异大，优先不内部吞错，留给外层处理
• 有全局统一错误监控的项目，业务代码优先不重复写catch打日志，让错误抛到全局统一上报即可
• 函数内部需要针对不同代码段做差异化错误处理时，直接在内部分拆多个Try/Catch块

代码示例对比 #

写法1：函数内部捕获错误 #

function catchErrorInside(){
    try {
         document.querySelector('#element-that-doesnt-exist').style.display = 'block';
    } catch(e){console.log(e)}
}

catchErrorInside();

适用场景：该函数所有调用场景下错误处理逻辑统一，无需调用方自定义处理。

写法2：外层调用时捕获错误 #

function catchErrorOutside(){
     document.querySelector('#element-that-doesnt-exist').style.display = 'block';
}

try { 
      catchErrorOutside();
} catch(e){console.log(e)}

适用场景：不同调用方需要对错误做差异化处理，比如部分场景需要弹出错误提示、部分场景只需要静默降级。

内容的提问来源于stack exchange，提问作者Joey