Reactjs 中的递归操作调用

Question

我有一个实现刷新授权令牌的方案。在这种情况下，我为每种操作（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" . 您对使用 "promise" 或 "then" 有什么解决方案吗？动作完成后，我需要在组件中呈现一些消息。

Answer 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));
    });
}

Answer 2

你必须 return 你的第二个承诺是 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);
            }

        })
    })
}

Reactjs 中的递归操作调用

Recursive Action Call in Reactjs

reactjs

redux

refresh-token

redux-promise