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

Question

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

为了处理异步操作，我使用中间件：

1. 识别承诺对象
2. 如果成功则使用then() 解决承诺，如果失败则使用catch()
3. 已解决的承诺将调度与其对应的操作 成功/失败动作。例如， GET_TRANSACTIONS 将调度 GET_TRANSACTIONS_SUCCESS 或 GET_TRANSACTIONS_FAIL

问题是，每次应用程序遇到错误（如undefined的访问属性）时，它都会触发异步操作中间件中的catch()处理程序并调度失败操作，这与此无关。

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

分派的失败动作的有效负载只是一个空对象。 （应该是undefined的访问属性）

如何确保.catch() 只处理promise 错误，而不处理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
    }
  }
}

Answer 1

如何确保 .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);
    });
};