ReactJS中使用react-fetching-library刷新Token后API数据不更新问题

问题根源 #

1. 响应未正确传递：拦截器处理401时，重新发起请求后没有将新的200响应返回给原请求链路，而是直接返回了最初的401响应，导致组件接收到的仍是错误状态，无法触发数据更新。
2. 异步逻辑混乱：拦截器声明为async函数但未使用await，嵌套的then也未正确链式传递响应，原请求流程不会等待刷新Token和重调API的操作完成。
3. 本地存储调用错误：代码中setItem("tokens", ...)应为localStorage.setItem，否则无法正确更新本地Token。
4. 重试请求未处理返回：重调API的fetch没有将结果返回，上层逻辑无法获取到成功响应。

修改后的代码 #

const responseInterceptor = (client: any) => async (action: any, response: any) => {
  // @ts-ignore
  const tokens = JSON.parse(localStorage.getItem('tokens'));
  
  if (response.status === 401) {
    try {
      // 调用刷新Token接口
      const refreshResponse = await fetch(`api.com/refresh_Token`, {
        method: 'POST',
        headers: {
          refreshToken: tokens.refreshToken,
          Accept: 'application/json',
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ ucc_pan: "string" })
      });
      
      const refreshData = await refreshResponse.json();
      console.log(refreshData, "response33");
      
      // 更新本地存储的Token
      localStorage.setItem("tokens", JSON.stringify(refreshData.data));
      
      // 重新发起原请求
      const retryResponse = await fetch(action.endpoint, {
        method: action.method,
        body: action.payload,
        headers: {
          accessToken: refreshData.data.accessToken,
          Accept: 'application/json',
          'Content-Type': 'application/json'
        },
      });
      
      // 将重试后的成功响应返回给原请求流程
      return retryResponse;
    } catch (error) {
      // 处理刷新Token失败的场景，比如清空Token并跳转登录页
      console.error('Refresh token failed:', error);
      localStorage.removeItem('tokens');
      window.location.href = '/login';
      // 返回原错误响应或抛出错误
      return response;
    }
  }
  
  // 非401场景直接返回原响应
  return response;
};

const clientOption = createClient({
  requestInterceptors: [requestHostInterceptor(API_URL)],
  responseInterceptors: [responseInterceptor],
  // cacheProvider: cache,
});
export const client = clientOption;
export const ClientContextProvider = CCP;

关键修改说明 #

• 用async/await替代嵌套then，确保异步流程按顺序执行，等待刷新Token和重调API完成后再返回结果。
• 将重调API的响应retryResponse返回，替换原来的401响应，让组件能接收到成功的200响应并触发数据更新。
• 修复localStorage.setItem的调用错误，确保Token正确持久化。
• 添加错误捕获逻辑，处理刷新Token失败的情况，避免程序异常。

内容的提问来源于stack exchange，提问作者govind jha