在React的useEffect钩子中，异步调用的try...catch与.catch是否都需要？

问题描述 #

我尝试在React的useEffect钩子中执行异步操作，先定义异步函数fetchData再调用它。但我不确定如何正确处理错误，想请教：函数内部的try...catch与调用时的.catch是否都需要？二者作用是否一致？

代码示例：

useEffect(() => {
  const fetchData = async () => {
    try {
      const token = await AsyncStorage.getItem('auth.token')
      // do something
    } catch (e) {
      console.error(e)
    }
  }

  fetchData().catch(console.error)
}, [])

解答 #

这两种错误处理方式不需要同时使用，它们的作用有重叠但也存在差异，具体如下：

• 函数内部的try...catch

  • 专门捕获fetchData内部所有通过await触发的异步操作错误，以及try代码块里的同步错误。比如示例中AsyncStorage.getItem的异常，还有后续// do something里的同步错误、await异步错误都会被它捕获。
  • 你可以在catch块里做针对性处理，比如区分错误类型、局部修复，只要不在catch里重新抛出错误，这个错误就不会向外传递。
  • 像你示例里的写法，内部已经捕获了所有可能的错误，外面的.catch根本不会触发，属于冗余代码。

• 调用时的.catch

  • 它捕获的是fetchData函数整体抛出的、未被内部try...catch处理的错误。比如：内部try块漏处理的错误、catch块里重新抛出的错误，或者fetchData里没有用await的异步操作抛出的错误。
  • 如果去掉内部的try...catch，只用这个.catch，也能捕获fetchData里所有未处理的错误，效果和内部try...catch类似，但错误处理的粒度更粗。

优化建议 #

• 如果只需要简单统一处理错误，选一种方式即可：要么保留内部try...catch处理所有异常，要么去掉内部catch，只用调用时的.catch。
• 如果需要分阶段处理错误（比如内部处理API调用的业务错误，外部处理函数执行的系统异常），可以同时使用，但要在内部catch里重新抛出错误，让外部的.catch能捕获到，示例如下：

useEffect(() => {
  const fetchData = async () => {
    try {
      const token = await AsyncStorage.getItem('auth.token')
      // do something
    } catch (e) {
      console.error('获取Token失败：', e)
      throw e // 重新抛出错误，让外部.catch捕获
    }
  }

  fetchData().catch(e => console.error('fetchData执行异常：', e))
}, [])

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