reactjs - React-axios-middleware promise 处理

Question

我正在开发一个 React 应用程序，它使用 redux-axios-middleware 来执行 XHR 请求。它的设置方式是在 index.js 中使用客户端，如下所示:

const client = axios.create({ //all axios can be used, shown in axios documentation
  baseURL:'https://api.vktest.xxx/api',
  responseType: 'json',
  validateStatus: function (status) {
    return status >= 200 && status < 300
  }
});

const axiosMiddle = axiosMiddleware(client)

export const store = createStore(rootReducer, composeEnhancers(applyMiddleware(thunk, axiosMiddle)))

然后，我从我的组件中调用我的操作，如下所示:

store.dispatch(loginAction(凭证))

这是操作:

import { LOGIN } from './types'

export function loginAction(credentials) {

  return dispatch => {
      return dispatch(doLogin(credentials) ).then(
      response => {
        dispatch({type: 'LOGIN_SUCCESS', response})
      },
      error => {
        dispatch({type: 'LOGIN_FAIL', error})
        throw error
      }
    )
  }
}

function doLogin(credentials) {
  return {
    type: LOGIN,
    payload: {
      request: {
        url: '/login/',
        method: 'POST',
        data: {
          username: credentials.username,
          password: credentials.password
        }
      }
    }
  }
}

它调度由 axios-middleware 捕获的 doLogin 函数来执行 XHR 调用。调用后，axios Promise 包含类型 LOGIN_SUCCESS 或 LOGIN_FAIL。 Axios 自动调度这些类型，reducers 可以对它们进行操作。到目前为止，一切都很好。

但是(我试图尽可能清楚)，当 axios 请求失败时，axios Promise 会被拒绝，并且会调度 LOGIN_FAIL 类型。由于该 promise 已解决，.then(..).catch(..) block 始终调用 .then。我似乎无法通过在处理调度回调而不是 axios 回调的 .then block 中做一些难看的事情来处理 axios 错误。

为了澄清正在发生的情况:

store.dispatch -> action -> doLogin -> axios -> reducer -> 返回操作调度。

我想处理 axios 和 reducer 步骤之间的 XHR 错误，但是当我这样做时:

import { LOGIN } from './types'

export function loginAction(credentials) {

  return dispatch => {
      return dispatch(doLogin(credentials).then(
      response => {
        dispatch({type: 'LOGIN_SUCCESS', response})
      },
      error => {
        dispatch({type: 'LOGIN_FAIL', error})
        throw error
      }
    ))
  }
}

function doLogin(credentials) {
  return {
    type: LOGIN,
    payload: {
      request: {
        url: '/login/',
        method: 'POST',
        data: {
          username: credentials.username,
          password: credentials.password
        }
      }
    }
  }
}

我收到以下错误:

Uncaught TypeError: doLogin(...).then is not a function
    at authentication.js:6

我想解决这个问题的原因是因为当前的设置调度以下内容:

如图所示，LOGIN_FAIL (axios) 和 LOGIN_SUCCESS (dispatch) 都被调用。我希望能够自己处理 axios 错误，因为我希望能够向用户提供登录尝试失败的反馈。不知怎的，我无法弄清楚如何。

有人可以帮助我吗？

Answer 1

我想我明白你的意思。

您可以通过设置 returnRejectedPromiseOnError 来更改该行为在中间件配置中。

请注意，promise 仅返回给链式操作。如果您设置此选项，您将必须始终应用catch回调，否则您将在调用Promise时收到未处理的拒绝错误。在组件中处理时，这可能会导致一些问题，因为当组件已经卸载时，可能会触发这些回调。

在我的代码中，我会尽可能避免 then 以避免这些副作用，但当我必须这样做时，我会这样做:

fetchSomething.then(action => {
  if(action.type.endsWith('SUCCESS')) {
      ....
  }

})