使 Redux thunk 调用同步以刷新令牌

Question

集成 redux 和 thunk 中间件。在访问令牌到期时，刷新令牌 api 被调用，并在其成功时再次召回由于令牌过期而未成功的第一个 api。

正在调用并返回刷新令牌 api，因为它是异步的。并且在刷新令牌成功响应之前立即调用编辑 api。我如何使其同步以便仅在收到刷新令牌的响应后调用 api

export function editClothDetails(data, id) {
return  function(dispatch, getState) {
    dispatch({ type: actions.EDIT_CLOTH_REQUEST });
     fetch(BASE_URL + EDIT_CLOTH_URL + `/${id}`, {
        method: "PUT",
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            'Authorization': 'Bearer ' + getState().Auth.accessToken
        },
        body: JSON.stringify({ ...data })
    })
    .then(result => checkHttpStatus(result))
    .then(result => checkForError(result))
    .then(jsonResponse => {
        dispatch({
            type: actions.EDIT_CLOTH_SUCCESS,
            payload: jsonResponse
        });
    })
    .catch((error) => {
        if(error.message === "Invalid token") {
            //what should be the right way to make these dispatches synchronous
            dispatch(refreshToken());
            dispatch(editClothDetails(data, id)); //setTimeout(()=> dispatch(editClothDetails(data, id)), 100);
        }
        console.error("There is an error in editing cloth details !! " + error.message);
        dispatch({
            type: actions.EDIT_CLOTH_FAILED,
            payload: error.message
        });
    });
};
}

export function refreshToken() {
    return (dispatch, getState) => {
        dispatch({ type: actions.REFRESH_TOKEN_REQUEST });
        fetch(BASE_URL + '/token', {
            method: "GET",
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'authorization': 'Bearer ' + getState().Auth.refreshToken
            },
        })
        .then(result => checkHttpStatus(result))
        .then(result => checkForError(result))
        .then(jsonResponse => {
            storeLocally(constants.APP_NAME, jsonResponse);
            dispatch({
                type: actions.REFRESH_TOKEN_REQUEST_SUCCESS,
                payload: jsonResponse
            });
        })
        .catch((err) => {
            console.error("There is an error refreshing token !!" + err.message);
            dispatch({
                type: actions.REFRESH_TOKEN_REQUEST_FAILED,
                payload: err.message
            });
        });
    };
}

Answer 1

你必须在这里使用 async-await ...

export function editClothDetails(data, id) {
return  async function(dispatch, getState) {      // -> see here

    .catch((error) => {
        if(error.message === "Invalid token") {
            await dispatch(refreshToken());                 //--> see here
            dispatch(editClothDetails(data, id)); 
        }
 
 // your other code
      
};
}

export async function refreshToken() {.  /// ---> see here
    return async (dispatch, getState) => {
        dispatch({ type: actions.REFRESH_TOKEN_REQUEST });
        /// your other code
    };
}

使 Redux thunk 调用同步以刷新令牌

Make Redux thunk calls synchronous for refreshing tokens

reactjs

redux

redux-thunk

synchronous

refresh-token