React.js中的递归操作调用

时间:2018-06-26 11:03:05

标签: reactjs redux refresh-token redux-promise

我有一个实现刷新身份验证令牌的方案。在这种情况下,我为每种动作(Post,Get,Delete)实现了一个通用动作,并使用参数对其进行了调用。

export function Get(param) {
return function (dispatch) {
    var query = param ? !!param.Query ? param.Query : "" : "";
    var funtionName = param ? param.FunctionName : "";
    var url = endPointUrl + funtionName;
    var offset = param.Offset ? param.Offset : "0";
    var limit = param.Limit ? param.Limit : "10";
    const config = { headers: { 'Authorization': 'Bearer ' + sessionStorage.getItem('access-token') } };
    return new Promise((resolve, reject) => {
        axios.get(url, config).then((response) => {
            dispatch({ type: 'FETCH_SUCCEED_' + param.Caller, payload: response.data })
            resolve(response.data);
        }).catch((error) => {
                if (error.request.status == "401" && error.request.statusText == "RB.Exception.TokenExpiredException") {
                    refreshToken().then(() => {
                        dispatch(Get(param));
                    });
                }
            else {
                dispatch({ type: 'FETCH_ERROR_' + param.Caller, payload: error })
                reject(error);
            }

        })
    })
}

每当我收到TokenExpiredException时,我都会调用refreshToken(),然后再次(递归)调用当前操作,因此我不能在组件中使用“ then” 。 您对使用“承诺”或“那么”有什么解决方案吗? 操作完成后,我需要在组件中呈现一些消息。

2 个答案:

答案 0 :(得分:1)

像这样吗?

export function Get(param) {
    return function (dispatch) {
        var query = param ? !!param.Query ? param.Query : "" : "";
        var funtionName = param ? param.FunctionName : "";
        var url = endPointUrl + funtionName;
        var offset = param.Offset ? param.Offset : "0";
        var limit = param.Limit ? param.Limit : "10";
        const config = { headers: { 'Authorization': 'Bearer ' + sessionStorage.getItem('access-token') } };
        return new Promise((resolve, reject) => {
            axios.get(url, config).then((response) => {
                dispatch({ type: 'FETCH_SUCCEED_' + param.Caller, payload: response.data })
                resolve(response.data);
            }).catch((error) => {
                if (error.request.status == "401" && error.request.statusText == "RB.Exception.TokenExpiredException") {
                    resolve(withRefresh(dispatch, param));
                }
                else {
                    dispatch({ type: 'FETCH_ERROR_' + param.Caller, payload: error })
                    reject(error);
                }

            })
        })
    }
}

function withRefresh(dispatch, param) {
    return refreshToken().then(() => {
        return dispatch(Get(param));
    });
}

答案 1 :(得分:0)

您必须返回您的第二个承诺return dispatch(Get(param)); 请尝试以下代码

export function Get(param) {
return function (dispatch) {
    var query = param ? !!param.Query ? param.Query : "" : "";
    var funtionName = param ? param.FunctionName : "";
    var url = endPointUrl + funtionName;
    var offset = param.Offset ? param.Offset : "0";
    var limit = param.Limit ? param.Limit : "10";
    const config = { headers: { 'Authorization': 'Bearer ' + sessionStorage.getItem('access-token') } };
    return new Promise((resolve, reject) => {
        axios.get(url, config).then((response) => {
            dispatch({ type: 'FETCH_SUCCEED_' + param.Caller, payload: response.data })
            resolve(response.data);
        }).catch((error) => {
                if (error.request.status == "401" && error.request.statusText == "RB.Exception.TokenExpiredException") {
                    refreshToken().then(() => {
                        return dispatch(Get(param));
                    });
                }
            else {
                dispatch({ type: 'FETCH_ERROR_' + param.Caller, payload: error })
                reject(error);
            }

        })
    })
}