javascript - 错误处理 redux-promise-middleware

Question

我正在学习 React，以及几乎所有围绕它的必要技术 - 所以我经常被我可能已经知道的事情绊倒。

我在处理异步事件时遇到错误。我在网上搜索过，但没有任何内容能够真正满足我的需求。

我目前正在使用 redux 和 redux-promise-middleware 来处理异步操作，如下所示:

export function myFunc() {
  return {
    type: FETCH_FUNC,
    payload: new Promise((resolve, reject) => {
      fetch ('some/url/location/from/which/to/fetch')
        .then( response => {
          if (!response.ok){
            throw new Error(response);
            }
          resolve(response.json());
        }).catch(error => {
          reject(error);
        }),
    })
  };
}

这里有两件事:首先，当不存在错误时代码可以正常工作。但是，当我故意在代码中创建错误时，会触发正确的方法，但我仍然在控制台中出现以下错误:

Uncaught (in promise) Error: [object Response]

.catch(...) block 不应该处理这个问题吗？我缺少什么？无论如何我应该得到这个吗？如果是这样，为什么？

其次，我读到将 fetch 包装在一个新的 Promise 中是一种反模式，并且有一个几乎暗示这可能是导致这里问题的原因。我遇到的所有例子都以这种方式使用它。还有什么选择呢？如何在没有包装器的情况下触发解析/拒绝来分派(dispatch)下一个操作？

任何帮助将不胜感激。感谢网络高手。

-------------编辑1----------------

来自官方redux-promise-middleware github 示例，它们有以下代码:

export default function request(url, options) {
  return new Promise((resolve, reject) => {
    if (!url) reject(new Error('URL parameter required'));
    if (!options) reject(new Error('Options parameter required'));

    fetch(url, options)
      .then(response => response.json())
      .then(response => {
        if (response.errors) reject(response.errors);
        else resolve(response);
      })
      .catch(reject);
  });
}

中间件的意图似乎是包装 fetch里面 new Promise并捕捉任何 reject s。如果有人有一个可行的替代方法来使用 redux-promise-middleware 来实现这一点，或者可以详细说明为什么它遵循这种模式，我们将不胜感激。

-------------编辑2----------------

不确定实现此目的的预期方式是什么或如何避免 promise 中的未捕获错误。只需调用 Promise.reject(...)除非包含错误处理函数，否则会导致 Uncaught Error :Promise.reject(...).then(() =>{...}, error => {...}) 。将其包含在中间件中会导致被拒绝的操作永远不会被调度。在找到合适的修复和/或实现之前，我已经放弃了 redux-promise-middleware。

Answer 1

我猜你得到的是预期的结果，中间件documentation中清楚地提到了这一点:

The middleware dispatches rejected actions but does not catch rejected promises. As a result, you may get an "uncaught" warning in the console. This is expected behavior for an uncaught rejected promise. It is your responsibility to catch the errors and not the responsibility of redux-promise-middleware.

但是，如果您询问最佳实践，这就是我很久以前就开始做的事情，而且它对我来说非常有效:

1- 对于某些 promise ，您可以按照文档中提到的方式执行:

dispatch({
    type: 'FOO_ACTION',
    payload: new Promise(() => {
      throw new Error('foo');
    })
  }).catch(error => {
    // catch and handle error or do nothing
  });

2- 要全局捕获所有被拒绝的 promise ，请在 redux-promise-middleware 之前添加此中间件，如下所示:

/**
 * a utility to check if a value is a Promise or not
 * @param value
 */
const isPromise = value => value !== null && typeof value === 'object' && typeof value.then === 'function';


export default () => {

  const middleWares = [];

  // global error middleware
  middleWares.push(() => next => action => {

    // If not a promise, continue on
    if (!isPromise(action.payload)) {
      return next(action);
    }

    /**
     * include a property in `meta and evaluate that property to check if this error will be handled locally
     *
     * if (!action.meta.localError) {
     *   // handle error
     * }
     *
     * The error middleware serves to dispatch the initial pending promise to
     * the promise middleware, but adds a `catch`.
     */
    if (!action.meta || !action.meta.localError) {
      // Dispatch initial pending promise, but catch any errors
      return next(action).catch(error => {
        if (config.showErrors) { // here you can decide to show or hide errors
          console.log(`${action.type} unhandled rejection caught at middleware with reason: ${JSON.stringify(error.message)}.`);
        }
        return error;
      });
    }

    return next(action);
  });

  // middleware
  middleWares.push(thunk);
  middleWares.push(promise());  
  middleWares.push(logger());

  return applyMiddleware(...middleWares);
}

我想这正是您正在寻找的;)

额外我强烈推荐axios由于以下原因过度获取:

• 如果请求有错误代码，axios 模块会自动拒绝 promise ，而您需要在 fetch 中手动处理错误代码
• 在 axios 中，您可以使用默认的基本 url、 header 、拦截器创建实例...
• 在 axios 中，您可以使用 token 取消任何先前的请求，这对于自动完成和聊天应用程序非常有用
• axios内部还自动在xhr和http模块之间切换，以根据环境(NodeJs或浏览器)执行ajax请求，我个人在中使用了相同的redux操作电子，nodejs，浏览器和react-native，一切都工作正常