在前端项目里最常见的“并发”问题其实不涉及多线程，而是多个异步流程争抢同一份资源。这往往导致使用者体验被破坏：例如连点按钮造成订单重复提交、搜索框的旧结果覆盖新结果、五个请求同时触发 Token 刷新…，这些看似不同，却本质相同——同一份数据被多处请求同时使用。怎么说呢，

前端鉴权的常见方案与痛点

登录态处理有 Cookie + Session 与 JWT Token 两大主流方法。老实说，Cookie 方案简单可靠。JWT 方案则需要自行管理 Token 过期与续期。对大多数项目最常用的是：

• 直接跳转登录页——Token 过期后直接让使用者返回登录。
• 滑动续期——后端在响应头中携带新的 Token，前端替换之。按理说，
• 主动刷新——短期 access token + 长期 refresh token；access token 过期时静默使用 refresh token 换新。

双 Token 的实现往往成为并发问题的聚焦点：因为它涉及“Token 过期后静默刷新并重发请求”，当多个请求同时发现 access token 已失效时很容易产生竞争。

Token 刷新流程示例

axios.interceptors.request.use(config => {
const token = localStorage.getItem;怎么说呢，if config.headers.Authorization = `Bearer ${token}`;return config;})，axios.interceptors.response.use(
response => response,async error => {
const originalRequest = error.config;if {
originalRequest._retry = true;const newToken = await refreshToken;originalRequest.headers.Authorization = `Bearer ${newToken}`;return axios;}
return Promise.reject;}
)，/* 刷新接口 */
async function refreshToken {
try {
const { data } = await axios.post('/auth/refresh',{
refresh_token: localStorage.getItem
});localStorage.setItem;return data.access_token;} catch {
localStorage.clear;window.location.href = '/login';return Promise.reject;}
}

上述代码看起来完美，但当页面上有数个请求几乎同步到达服务器时会出现：

• A 请求收到 401 → 开始刷新 → isRefreshing = true;
• B 请求收到 401 → 判断 isRefreshing 为 true → 返回 undefined；
• A 成功完成刷新，B 已经错过了更新。

B 的失败导致整个功能链条崩溃，使用者甚至可能看到错误提示或无法继续操作。其实，

Promise Cache：让所有请求共享同一次刷新工作

主要思路：

• 维护一个全局变量 refreshPromise 来缓存当前正在进行的刷新操作；老实说，
• 若已有 refreshPromise 存在则直接返回该 Promise。让后续请求等待，否则创建新的刷新 Promise 并缓存之；
• `finally` 清空缓存，以便下一轮可以 触发。

let refreshPromise = null;function getNewAccessToken {
if return refreshPromise;refreshPromise = axios
.post('/auth/refresh',{
refresh_token: localStorage.getItem
})
.n => {
localStorage.setItem;
return data.access_token;})
.catch(err => {
localStorage.clear;window.location.href = '/login';return Promise.reject;})
.finally => {
refreshPromise = null;})，return refreshPromise;说起来，}

现在无论多少个请求触发。都只会执行一次真正的网络调用，所有人共享同一个 Promise 的结果，从而避免重复刷新的成本与 race 条件。话说回来，

为何标志位不足以解决 Token 刷新？

User Pain Point： "连点按钮导致订单重复提交" 和 "搜索框旧结果覆盖新结果" 都需要等待到结果再继续业务逻辑。而单纯用布尔标志只能阻止重复执行，却无法让后续调用得到正确的数据。

let isRefreshing = false;async function simpleRefresh {
if return;// 错误：后续调用得到 undefined
isRefreshing = true;try { /* ... */ } finally { isRefreshing=false;}
}

User Pain Point： "使用者点击下单后页面卡死" 正是因为某些请求没有等到最新 Token 就继续执行，从而产生错误状态。使用 Promise Cache 可以确保所有等待者都获得同一份有效数据。怎么说呢，

从举一反三来看，前端并发问题的两大类模式

第一类 — 多次触发。只该执行一次

• User Pain Point： "页面上有多个组件同时请求同一接口" 导致三次网络消耗和三套 UI 状态更新。
• User Pain Point： "连点“下单”按钮造成多次 POST".

const pendingRequests = new Map;

function dedupe { if ) return pendingRequests.get;

const p = fn.finally => pendingRequests.delete);pendingRequests.set;return p，}

// 用法 dedupe => axios.get);dedupe => axios.post);这段代码仅需三行就可以去重，无需显式队列或锁。话说回来，

第二类 — 多次触发。只保留最终一次

• User Pain Point： "快速输入搜索关键词导致旧查询结果覆盖最新显示".

let currentId = -1;

async function search { const id = ++currentId;不过，const res = await axios.get;if return，// 已被 newer request 覆盖 setResults;}

/* 更彻底的方法 —— 使用 AbortController */ let controller;

async function searchWithAbort { controller?.abort，// cancel previous request controller = new AbortController;

try{ const res= await axios.get;setResults，}catch{ if console.log;else throw e;话说回来，} }

⚠️ 小贴士：时间戳做为 ID 存在精度问题。自增整数更安全且无溢出风险。