为什么axios .catch()在redux中间件中捕获javascript错误?

时间:2017-02-08 10:23:21

标签: javascript ajax reactjs redux

我在react redux应用程序中使用axios作为我的客户端来获取ajax请求。

要处理异步操作,我使用以下的中间件:

  1. 识别承诺对象
  2. 如果成功则解析承诺then()或者如果失败则解析catch()
  3. 已解决的承诺将发送与其对应的操作 成功/失败的行动。例如,GET_TRANSACTIONS将发送 GET_TRANSACTIONS_SUCCESS或GET_TRANSACTIONS_FAIL
  4. 问题是,每次应用程序收到错误(如undefined的访问属性)时,它都会触发异步操作中间件中的catch()处理程序并调度失败操作,这与此无关。

    结果,javascript错误没有显示在控制台中,所以我不知道该应用程序实际发生了什么。

    调度的失败操作的有效负载只是一个空对象。 (它应该是undefined)的访问属性

    如何确保.catch()仅处理承诺错误,而不是javascript错误?

    clientMiddleware.js

    export const clientMiddleware = (client) => {
      return ({ dispatch, getState }) => {
        return next => action => {
          if (typeof action === 'function') {
            return action(dispatch, getState)
          }
    
          const { promise, types, ...rest } = action
    
          if (!promise) {
            return next(action)
          }
    
          const [REQUEST, SUCCESS, FAILURE] = types
          next({ ...rest, type: REQUEST })
    
          const actionPromise = promise(client)
    
          actionPromise
            .then((res) => next({ ...rest, payload: res, type: SUCCESS }))
            .catch((err) => next({ ...rest, payload: err, type: FAILURE }))
    
          return actionPromise
        }
      }
    }
    

1 个答案:

答案 0 :(得分:0)

  

如何确保.catch()只处理promise错误,而不是javascript错误?

AFAIK没有。我们在应用程序中遇到了同样的问题。错误是被吞噬的。出于调试目的,我们使用以下内容:

Promise.prototype.nativeCatch = Promise.prototype.catch;
Promise.prototype.catch = function(handler) {
    return this.nativeCatch(function(error) {
        try {
            console.error(error.stack);
        }
        catch(error) {

        }
        handler(error);
    });
};