我正在开发一个React应用,并且一直在使用redux和thunk取得了一些成功,但是,我最近需要链接一些操作。我似乎遇到的问题是,即使第一个操作的api调用都返回422,所以我希望返回Promise.reject(error);
会阻止堆栈继续进行,但是无论如何它都会沿链条向下移动。>
以下是一些代码:
actions.js
这是我要使用的链接操作:
export const resetPasswordAndRefreshUser = (password, password_confirmation) => {
return (dispatch, getState) => {
return dispatch(resetPassword(password, password_confirmation))
.then((result) => {
//// This shouldn't get executed in resetPassword rejects /////
//// console.log(result) is undefined ////
return dispatch(getAuthedUser());
}, (error) =>{
// Do Nothing
}).catch((error) => {
return Promise.reject(error);
});
}
};
动作定义本身:
export const resetPassword = (password, password_confirmation) => {
return dispatch => {
dispatch({
type: authConstants.LOGIN_RESET_REQUEST
});
return AuthService.resetPassword(password, password_confirmation)
.then((result) => {
dispatch({
type: authConstants.LOGIN_RESET_SUCCESS
});
dispatch({
type: alertConstants.SUCCESS,
message: 'Your new password was set successfully.'
});
history.push('/');
}, error => {
dispatch({
type: authConstants.LOGIN_RESET_ERROR
});
dispatch({
type: alertConstants.ERROR,
message: 'Error: ' + error
});
});
}
};
export const getAuthedUser = () => {
return dispatch => {
dispatch({
type: authConstants.LOGIN_AUTHED_USER_REQUEST
});
return AuthService.getAuthedUser()
.then((result) => {
dispatch({
type: authConstants.LOGIN_AUTHED_USER_SUCCESS,
user: result
});
}, error => {
dispatch({
type: authConstants.LOGIN_AUTHED_USER_ERROR
});
dispatch({
type: alertConstants.ERROR,
message: 'Error: ' + error
});
});
};
};
service.js
static getAuthedUser = () => {
return API.get(config.api.url + '/me')
.then((response) => {
// Get Current User From LocalStorage
const vmuser = JSON.parse(localStorage.getItem('vmuser'));
if (vmuser) {
// Update User & Set Back In LocalStorage
vmuser.user = response.data;
localStorage.setItem('vmuser', JSON.stringify(vmuser));
}
return response.data;
}).catch(error => {
return Promise.reject(error);
}).finally(() => {})
};
static resetPassword = (password, password_confirmation) => {
return API.post(config.api.url + '/reset', { password, password_confirmation })
.then((response) => {
return response.data;
}).catch(error => {
console.log('reset error');
return Promise.reject(error);
}).finally(() => {})
};
现在 resetpassword api调用返回了422(根据我的要求进行测试)。但是,当我查看“网络请求”选项卡时,尽管仍应在 authservice 中拒绝承诺,但仍会进行 getAuthedUser 调用。
我只是误解了Promise,什么时候应该执行.then()
?
答案 0 :(得分:0)
啊,我想我通过进一步的Google搜索发现了执行此操作的正确方法:
在合并操作中,我添加了当前状态的检查:
// State Updated, Check If Successful
if (true === getState().auth.resetPassword) {
return dispatch(getAuthedUser());
}
因此,合并操作的完整代码如下:
export const resetPasswordAndRefreshUser = (password, password_confirmation) => {
return (dispatch, getState) => {
return dispatch(resetPassword(password, password_confirmation))
.then((result) => {
// State Updated, Check If Successful
if (true === getState().auth.resetPassword) {
return dispatch(getAuthedUser());
}
}, (error) => {
// Do Nothing
}).catch((error) => {
return Promise.reject(error);
});
}
};