尝试Catch不与Promise和Redux Thunk一起使用

Question

可以随意编辑标题，因为我不知道如何正确表达。

我们正在使用React 6.13，Babel 7，Node 12

---

好吧，我正在尝试重构我们的数千行代码，对于重复代码我要做的一件事就是创建一个try-catch-wrapper函数，因为我们对每个错误都做同样的事情。

下面是包装函数：

const tryToCatch = (func, data ,dispatch) => {
   try {
      func()
      console.log('mmmm')
   } catch (error) {
      console.log('Error: ', error)
      console.log(data)
      return handleError(error, data , dispatch)
   }
}

下面是我如何称呼它，我正在使用console.log(a)打印：

就像从未输入CATCH一样，它的出现是因为console.log('Error: ', error)和 console.log(data)永远不会打印。

export const search = () => async dispatch =>
   tryToCatch(
      async () => {

         //Get Games
         const { data } = await serverApi('GET', '/api/common/games')

         console.log(a) //a is undefined so it will try to catch error

         console.log("hello");

         ..etc code
      },
      dispatch,
      { filtersLoading: false }
   )

Answer 1

回调函数是异步的，try-catch仅同步工作。您可以使tryToCatch异步函数并在func（）调用之前添加await。

const tryToCatch = async (func, data ,dispatch) => {
   try {
      await func()
      console.log('mmmm')
   } catch (error) {
      console.log('Error: ', error)
      console.log(data)
      return handleError(error, data , dispatch)
   }
}

参考：https://javascript.info/try-catch

Answer 2

const tryToCatch = async (func, data ,dispatch) => { // Missing `async`
   try {
      await func()
      console.log('mmmm')
   } catch (error) {
      console.log('Error: ', error)
      console.log(data)
      return handleError(error, data , dispatch)
   }
}