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自动发送这些类型，并且减速器可以对其执行操作。到现在为止还挺好。

但是（我试图尽可能清楚），当axios请求失败时，axios承诺被拒绝，并且调度类型为LOGIN_FAIL。由于该承诺已得到解决，.then(..).catch(..)区块一直在呼吁.then。我似乎无法处理axios错误，在处理调度回调而不是axios回调的.then块中做了难看的事情。

要clearify下面发生的事情：

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

我要处理的爱可信与减速机步之间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（调度）中所看到的是被调用。我希望能够自己处理axios错误，因为我希望能够例如向用户反馈失败的登录尝试。不知何故，我无法弄清楚如何。

有人可以帮助我吗？

Answer 1

我想我知道你的意思。

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

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

林我的代码，我会尽量避免then尽可能避免这些副作用，但是当我有我这样做：

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

})