用 AbortController 取消过期请求,避免竞态条件导致数据错乱
在搜索框联想、路由切换或重复提交的场景里,经常会遇到一个接口还没返回、又发起了新请求的情况。如果后发的请求先回来,界面可能被旧数据覆盖;如果先发的请求后回来,又会把新数据冲掉。这种竞态条件在前端并不少见,尤其在输入框实时搜索、切 tab 拉不同列表、或者弹窗打开时加载详情时容易复现。常见做法是用一个 flag 标记当前请求是否还有效,或者比较时间戳,但写多了会散落在各处。AbortController 提供了一种更直接的取消机制,能把“取消”这件事从业务逻辑里抽出来,让请求真正被中断,而不是等它回来再丢弃结果。这篇文章会从实际代码出发,讲清楚 AbortController 在 fetch 和...