react-axios-middleware 承诺处理

Posted 2023-02-22

【中文标题】react-axios-middleware 承诺处理

【英文标题】：react-axios-middleware promise handling

【发布时间】：2018-02-14 00:20:49

【问题描述】：

我正在开发一个使用 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 承诺被拒绝，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 错误，因为我希望能够向用户提供登录尝试失败的反馈。不知何故，我无法弄清楚如何。

有人可以帮我吗？

【问题讨论】：

我对中间件为您提供的价值感到有点困惑，我会改用一些承诺中间件

你有例子吗？

你能帮我解决以下问题吗？link我在成功时面临未处理的承诺错误。失败很有效，从未发现问题

【参考方案1】：

我想我明白你的意思了。

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

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

我的代码我尽量避免then 以避免这些副作用，但当我不得不这样做时，我会这样做：

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

)

【讨论】：

感谢您的评论。我确实实现了它，但它并没有改变中间件的行为。放置doLogin.then() 仍然会产生错误doLogin(...).then is not a function 并围绕调度构建一个then/catch 仍然调用LOGIN_SUCCESS

我确实实现了您发布的 if 内容。现在有效！谢谢。

你能帮我解决以下问题吗？link我在成功时面临未处理的承诺错误。失败很有效，从未发现问题