在这里我会做一些不同的事情...
1.* 始终 * 将添加Authorization头的责任委托给拦截器。您的消费代码不需要知道它
1.对需要令牌刷新的请求进行排队，以避免多次刷新请求
1.对所有请求使用Fetch或Axios。混合它们只会导致更大的爆炸半径和更困难的测试

// Create instance
const instance = axios.create({ baseURL: "https://echo.zuplo.io/" });

let refreshTokenPromise; // used to queue up requests

// Add interceptor
instance.interceptors.request.use(async (config) => {
  const tokens = JSON.parse(localStorage.getItem('users'));
  if (!tokens) {
    console.warn("No tokens");
    return config;
  }
  const accessTokenValid = Date.now() <= (tokens.expirationTime ?? Date.now());
  if (accessTokenValid) {
    console.log("Token still valid");
    
    // Now add the header
    config.headers.Authorization = `Bearer ${tokens.accessToken}`;
    return config;
  }
  const refreshToken = tokens.refreshToken;
  if (!refreshToken) { 
    console.warn("No refresh token");
    return config;
  }
  
  // Check for in-flight refresh requests and start one if required
  refreshTokenPromise ??= getRefreshedTokens(refreshToken);
  
  const newTokens = await refreshTokenPromise;
  refreshTokenPromise = null; // clean in-flight state

  localStorage.setItem('users', JSON.stringify(newTokens));

  config.headers.Authorization = `Bearer ${newTokens.access_token}`;

  return config;
});

// Auth requests
const authApi = axios.create(/* baseURL, headers, etc */);
const getRefreshedTokens = async (token) => {
  console.log("Refresh auth token");
  // return (await authApi.get("/auth/refresh/token", { params: { token } })).data.data.data;
  
  // mock data instead
  return delay({
    access_token: "new_access_token",
    expires_in: new Date(Date.now() + 3600000), // +1 hour
    refresh_token: "new_refresh_token",
  });
};

// Mocks (localStorage doesn't work in Snippets)
const localStorage = {s:{},setItem(k,v){this.s[k]=v},getItem(k){return this.s[k]??null}};
const delay = (v,d=2000)=>new Promise(r=>setTimeout(r,d,v));

// Demo setup
localStorage.setItem("users", JSON.stringify({
  accessToken: "old_access_token",
  expirationTime: new Date(2020, 0, 1), // very expired
  refreshToken: "refresh_token",
}));

// Simulate simultaneous requests
[123, 456, 789].forEach(async (id) => {
  console.log("Getting user", id);
  const {
    data: {
      url,
      headers: {
        authorization
      }
    }
  } = await instance.get(`/users/${id}`);
  console.log("user response:", { url, authorization });
});

.as-console-wrapper { max-height: 100% !important; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.4.0/axios.min.js"></script>

您可以看到，序列首先解析刷新令牌，并且在使用更新的访问令牌发出 user 请求之前只解析一次。

这里出现的问题是因为axios在拦截器有机会刷新令牌之前发送了原始请求。您需要做的是防止发送原始请求，直到令牌被刷新。
一种方法是显式地暂停原始请求，直到刷新完成。这可以通过在刷新令牌时创建传入请求的队列，然后在刷新令牌后解析它们来完成。