react-axios-middleware 承诺处理

Question

我正在开发一个使用 redux-axios-middleware 执行 XHR 请求的 React 应用程序。它的设置方式是 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(credentials))

这是动作：

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 承诺包含 LOGIN_SUCCESS 或 LOGIN_FAIL 类型。 Axios 自动调度这些类型，reducer 可以对它们进行操作。到目前为止，一切都很好。

然而（我试图尽可能清楚），当 axios 请求失败时，axios promise 被拒绝并调度 LOGIN_FAIL 类型。由于该承诺已解决，因此 .then(..).catch(..) 块始终调用 .then。我似乎无法通过在处理调度回调而不是 axios 回调的 .then 块中做一些丑陋的事情来处理 axios 错误。

要澄清以下情况：

store.dispatch -> action -> doLogin -> axios -> reducer -> back to action dispatch.

我想处理 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 回调，否则您将收到 unhandled rejection when calling Promise 错误。这可能会在组件中处理时引起一些问题，因为当组件已经卸载时可能会触发这些回调。

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

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

})

react-axios-middleware 承诺处理

react-axios-middleware promise handling

reactjs

react-native

react-redux

axios