Promise与Redux Thunk结合时Try Catch失效问题排查

你的问题出在两个关键地方：async函数的错误捕获逻辑和参数传递顺序不匹配，导致try/catch无法正常捕获错误。

1. 普通try/catch无法捕获未被await的async函数错误 #

你传入tryToCatch的是一个async箭头函数，async函数执行后会返回一个Promise——哪怕函数内部是同步错误（比如console.log(a)这种未定义变量），也会被自动包装成Promise的reject状态，而不是直接抛出到当前的try/catch块中。

原tryToCatch里只是直接调用func()，没有await这个Promise，所以同步错误会转化为Promise的拒绝，无法被外层的try/catch捕获。

2. 参数传递顺序错误 #

看你的tryToCatch定义：

const tryToCatch = (func, data ,dispatch) => { ... }

参数顺序是func → data → dispatch，但你调用时传的是：

tryToCatch( async () => { ... }, dispatch, { filtersLoading: false } )

这里把dispatch和data的顺序搞反了，导致tryToCatch里的data拿到的是dispatch函数，dispatch拿到的是{ filtersLoading: false }，不仅逻辑混乱，还会影响后续handleError的执行。

修正后的代码 #

第一步：修复tryToCatch函数，添加await处理async返回的Promise #

const tryToCatch = async (func, data, dispatch) => { 
  try { 
    await func() // 必须await async函数，才能捕获其内部的所有错误
    console.log('mmmm') 
  } catch (error) { 
    console.log('Error: ', error) 
    console.log(data) 
    return handleError(error, data, dispatch) 
  } 
}

这里把tryToCatch也改成async函数，因为内部使用了await，这样Redux Thunk的async action调用它时能正常处理。

第二步：修正调用时的参数顺序 #

export const search = () => async dispatch => 
  tryToCatch( 
    async () => { 
      // Get Games 
      const { data } = await serverApi('GET', '/api/common/games') 
      console.log(a) // 现在这个未定义变量的错误会被正常捕获了
      console.log("hello"); 
      // ...其他业务代码
    }, 
    { filtersLoading: false }, // data参数放到第二个位置
    dispatch // dispatch放到第三个位置
  )

这样修改后，async函数内部的同步错误（如未定义变量）和异步错误（如await的Promise拒绝）都会被tryToCatch里的catch块正常捕获。

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