[前端]异步请求的竞态问题

竞态条件简介

遇到的问题

切换标签请求数据，但又快速切换标签请求数据，展示的是前一个标签的数据，

需要在切换标签时添加取消请求的机制，使用AbortController来取消正在进行的请求。当用户快速切换标签时，取消之前的请求，只保留最新的请求。同时需要优化状态管理，确保在切换标签时正确重置状态。

1. 添加了 AbortController 来管理异步请求的生命周期：

   • 使用 useRef 保存当前请求的 AbortController 实例
   • 在每次发起新请求前，会先取消之前的请求
   • 请求被取消时会清理相关的定时器和状态

2. 优化了 loadMoreBlogs 函数的错误处理：

   • 使用 try/catch 结构来处理异步操作
   • 区分请求取消和其他错误类型
   • 在 finally 块中确保只有在请求未被取消时才更新状态

3. 增强了 useEffect 的清理机制：

   • 在组件卸载或依赖项改变时自动取消进行中的请求
   • 重置 AbortController 实例

这些改进确保了：

• 当用户快速切换标签时，旧的请求会被立即取消
• 只有最新的请求结果会被显示
• 避免了状态更新的竞态条件
• 防止了内存泄漏

import { Typography, Image, Spin } from 'antd';
import { useEffect, useRef, useState } from 'react';
import '../../assets/css/blogs.css';
import { generateBlogImage } from './utils';const { Title } = Typography;import blogData from './mock';interface BlogItem {id: number;image: string;title: string;theme: string;abstract: string;url: string;
}const Blogs = () => {const [blogs, setBlogs] = useState<BlogItem[]>([]);const [loading, setLoading] = useState(false);const [currentPage, setCurrentPage] = useState(1);const [selectedCategory, setSelectedCategory] = useState('全部');const [hasMore, setHasMore] = useState(true);const blogsGridRef = useRef<HTMLDivElement>(null);const abortControllerRef = useRef<AbortController | null>(null);// 从mock数据中获取博客数据const mockBlogs = (page: number): BlogItem[] => {const filteredData = selectedCategory === '全部' ? blogData : blogData.filter(item => item.theme === selectedCategory);const pageSize = 6;const start = (page - 1) * pageSize;const end = start + pageSize;const pageData = filteredData.slice(start, end);return pageData.map((blog, index) => ({id: Date.now() + index,image: generateBlogImage(blog),title: blog.title,theme: blog.theme,abstract: blog.title,url: blog.url}));};// 加载更多博客const loadMoreBlogs = async () => {if (!hasMore) return; // 取消之前的请求if (abortControllerRef.current) {abortControllerRef.current.abort();abortControllerRef.current = null;}// 创建新的 AbortControllerconst abortController = new AbortController();abortControllerRef.current = abortController;let isCancelled = false;const currentCategory = selectedCategory;setLoading(true);try {// 使用 signal 来控制请求的取消await new Promise((resolve, reject) => {const timeoutId = setTimeout(resolve, 1000);const handleAbort = () => {clearTimeout(timeoutId);isCancelled = true;reject(new Error('Request aborted'));};abortController.signal.addEventListener('abort', handleAbort);});// 检查分类是否已改变或请求已被取消if (currentCategory !== selectedCategory || isCancelled || abortController.signal.aborted) {setLoading(false);return;}const newBlogs = mockBlogs(currentPage);// 再次检查分类是否已改变或请求已被取消if (currentCategory !== selectedCategory || isCancelled || abortController.signal.aborted) {setLoading(false);return;}if (newBlogs.length === 0) {setHasMore(false);} else {setBlogs(prev => [...prev, ...newBlogs]);setCurrentPage(prev => prev + 1);}} catch (error) {if (!isCancelled && error.message !== 'Request aborted') {console.error('加载博客失败:', error);}} finally {if (!isCancelled && !abortController.signal.aborted) {setLoading(false);abortControllerRef.current = null;}}};// 初始加载useEffect(() => {setBlogs([]);setCurrentPage(1);setHasMore(true);loadMoreBlogs();// 清理函数：组件卸载或依赖项改变时取消正在进行的请求return () => {if (abortControllerRef.current) {abortControllerRef.current.abort();abortControllerRef.current = null;}};}, [selectedCategory]);// 滚动加载更多（接近底部 1/5 时）useEffect(() => {const handleScroll = () => {const container = blogsGridRef.current;if (!container || loading || !hasMore) return;const { scrollTop, scrollHeight, clientHeight } = container;// 到达底部 1/5 范围内if (scrollHeight - scrollTop - clientHeight < clientHeight / 5) {loadMoreBlogs();}};const container = blogsGridRef.current;if (container) {container.addEventListener('scroll', handleScroll);}return () => {if (container) {container.removeEventListener('scroll', handleScroll);}};}, [loading, hasMore]);const categories = ['全部', '前端','React', 'Vue', 'WebGL', 'GIS','工程化',  '性能优化', '原理', '前沿'];const [scrollPosition, setScrollPosition] = useState(0);// 窗口大小变化时更新滚动位置useEffect(() => {const handleResize = () => {const container = categoryFilterRef.current;if (container) {setScrollPosition(container.scrollLeft);}};window.addEventListener('resize', handleResize);handleResize(); // 初始调用return () => window.removeEventListener('resize', handleResize);}, [scrollPosition, window.innerWidth]); // 添加window.innerWidth依赖const categoryFilterRef = useRef<HTMLDivElement>(null);const handleScroll = (direction: 'left' | 'right') => {const container = categoryFilterRef.current;if (!container) return;const scrollAmount = 200; // 每次滚动的距离const newPosition = direction === 'left' ? Math.max(0, scrollPosition - scrollAmount): Math.min(container.scrollWidth - container.clientWidth, scrollPosition + scrollAmount);container.scrollTo({left: newPosition,behavior: 'smooth'});setScrollPosition(newPosition);};return (<section id="blogs" className="blogs-section bg-white relative z-1"><div className="blogs-container"><Title level={1} className="section-title">博客</Title>{/* 分类筛选 */}<div className="category-filter-container" style={{ position: 'relative', width: '100%' }}><button className="scroll-button left" onClick={() => handleScroll('left')}style={{display: scrollPosition > 0 ? 'block' : 'none',position: 'absolute',left: 0,top: '50%',transform: 'translateY(-50%)',zIndex: 1,background: '#fff',border: '1px solid #ddd',borderRadius: '50%',width: '32px',height: '32px',cursor: 'pointer',boxShadow: '0 2px 4px rgba(0,0,0,0.1)'}}>←</button><div ref={categoryFilterRef}className="category-filter" style={{ display: 'flex', gap: '8px', overflowX: 'auto',scrollBehavior: 'smooth',padding: '0 40px',msOverflowStyle: 'none',scrollbarWidth: 'none','&::-webkit-scrollbar': { display: 'none' },'@media (max-width: 768px)': {padding: '0 32px',gap: '6px'}}}onScroll={(e) => setScrollPosition(e.currentTarget.scrollLeft)}>{categories.map(category => (<buttonkey={category}className={`category-button ${selectedCategory === category ? 'active' : ''}`}onClick={() => {setSelectedCategory(category);setCurrentPage(1);setBlogs([]);if (blogsGridRef.current) {blogsGridRef.current.scrollTop = 0;}}}style={{ flexShrink: 0,padding: '8px 16px',borderRadius: '20px',border: '1px solid #e8e8e8',background: selectedCategory === category ? '#1890ff' : '#fff',color: selectedCategory === category ? '#fff' : '#333',transition: 'all 0.3s ease',fontSize: window.innerWidth <= 768 ? '14px' : '16px',whiteSpace: 'nowrap'}}>{category}</button>))}</div><button className="scroll-button right" onClick={() => handleScroll('right')}style={{display: categoryFilterRef.current && scrollPosition < (categoryFilterRef.current.scrollWidth - categoryFilterRef.current.clientWidth) ? 'block' : 'none',position: 'absolute',right: 0,top: '50%',transform: 'translateY(-50%)',zIndex: 1,background: '#fff',border: '1px solid #ddd',borderRadius: '50%',width: '32px',height: '32px',cursor: 'pointer',boxShadow: '0 2px 4px rgba(0,0,0,0.1)'}}>→</button></div>{/* 博客列表（限制高度并滚动） */}<div className="blogs-grid" ref={blogsGridRef}>{blogs.map((blog) => (<div key={blog.id} className="blog-item" onClick={() => window.open(blog.url, '_blank')} style={{ cursor: 'pointer' }}><Imagesrc={blog.image}alt={blog.title}className="blog-image"preview={false}/><div className="blog-info"><h3 className="blog-title">{blog.title}</h3><div className="blog-meta"><span>{blog.abstract}</span></div></div></div>))}{loading && (<div className="loading-container"><Spin size="large" /></div>)}</div></div></section>);
};export default Blogs;

---

分析与解决

以下是针对“快速切换标签页导致数据展示错乱”问题的解决方案及技术解析，适用于前端开发场景（以Vue框架为例）：

---

一、问题现象与原因分析

场景复现：

当用户快速点击不同标签页时，前一个标签页的异步请求尚未完成，后一个标签页的请求已发出。若前一个请求响应较慢，返回时覆盖了当前标签页的数据，导致显示错误。

核心原因：

1. 异步请求竞态：未处理未完成的请求，新旧请求响应顺序不可控
2. 组件状态未隔离：标签页组件复用导致数据残留
3. 缓存策略冲突：浏览器或框架缓存旧数据未更新

---

二、解决方案与代码实现

方案1：请求中断（竞态控制）

通过AbortController取消未完成的请求，确保只处理最新请求结果。

// Vue3 Composition API 示例
import { ref } from 'vue'
import axios from 'axios'export default {setup() {const activeTab = ref('tab1')let controller = nullconst fetchData = async (tabId) => {// 取消前一个请求if (controller) controller.abort()controller = new AbortController()try {const response = await axios.get(`/api/${tabId}`, {signal: controller.signal})// 更新对应标签页数据data.value = response.data} catch (err) {if (err.name !== 'CanceledError') {console.error('请求失败:', err)}}}watch(activeTab, (newVal) => {fetchData(newVal)})return { activeTab, data }}
}

方案2：状态标记（请求时序校验）

通过唯一标识验证是否为最新请求，避免旧数据覆盖。

let requestId = 0const fetchData = async (tabId) => {const currentId = ++requestIdconst response = await axios.get(`/api/${tabId}`)// 仅处理最新请求if (currentId === requestId) {updateData(tabId, response.data)}
}

方案3：组件隔离（Vue Keep-Alive优化）

结合<keep-alive>与动态组件，实现标签页缓存与状态隔离。

<template><keep-alive :include="cachedTabs"><component :is="activeComponent" :key="activeTab" @data-loaded="handleData"/></keep-alive>
</template><script>
export default {data() {return {cachedTabs: [],activeTab: 'TabA'}},computed: {activeComponent() {return defineAsyncComponent(() => import(`@/components/${this.activeTab}`))}},methods: {handleData(newData) {// 根据activeTab更新对应数据}}
}
</script>

方案4：防抖节流（UI层控制）

限制高频切换的请求频率，减少无效请求。

import { debounce } from 'lodash'export default {methods: {handleTabClick: debounce(function(tabId) {this.fetchData(tabId)}, 300)}
}

---

三、最佳实践建议

1. 混合策略：优先使用请求中断 + 状态标记，配合组件隔离

2. 缓存管理：

• 设置Cache-Control: no-cache请求头

• 对需要缓存的标签页使用<keep-alive>的include白名单

3. 错误处理：

axios.interceptors.response.use(response => {if (response.config.signal?.aborted) {return Promise.reject(new Error('Request aborted'))}return response
})

4. 性能监控：

• 使用Navigation Timing API统计请求耗时

• 对超过1s的请求添加加载状态提示

---

四、延伸思考

1. 数据一致性：当多个标签页共享数据时，可使用Vuex/Pinia统一状态管理
2. SSR场景：服务端渲染时通过asyncData预请求避免客户端竞态
3. Web Worker：将数据处理移入Worker线程，避免主线程阻塞

---

五、总结

通过请求中断、状态验证、组件隔离等综合手段，可有效解决快速切换导致的错乱问题。建议根据实际场景选择组合策略，并通过性能监控持续优化用户体验。

---

再回味

什么是异步请求的竞态条件

竞态条件（race condition）是指两个或多个异步操作同时访问或修改同一资源，由于时序不可预测，最终结果依赖于操作完成的先后顺序，引发不可预期或错误的行为。(Arcjet blog, GuidePoint Security) 在 JavaScript 单线程模型中，事件循环的微任务与宏任务调度也可能导致类似的时机问题。(MDN Web Docs)

引发竞态条件的原因

• 浮动承诺（Floating Promises）：未正确链式返回的 Promise 可能在后续处理程序 attach 之前就已完成，导致逻辑错乱。(MDN Web Docs)
• 并发无序执行：多次发起相同请求，且无前置校验或取消机制，可能导致响应回包次序与预期不符。(Medium)
• 缺乏锁与队列机制：在并行执行环境中，若对共享数据缺少互斥访问控制，也会出现时序冲突。(Stack Overflow)

应用场景

前端并发数据请求

用户界面中，当组件同时发起多个 API 请求，且部分请求依赖前者结果时，若无严格顺序控制，将导致 UI 状态错误。(MDN Web Docs) 在 React 中，类似场景下还会触发内存泄漏或更新已卸载组件的警告。(Sébastien Lorber)

多用户提交场景

在高并发表单提交或投票系统中，多用户同时操作同一资源，若接口缺乏幂等性保护或事务隔离，将产生重复写入或丢失更新。(Welcome) 必要时可通过压力测试验证系统是否存在不一致状态。(Software Engineering Stack Exchange)

后端微服务调用

微服务架构下，多个服务并行调用同一下游接口或数据库，若缺少分布式锁，可能因调用顺序错乱导致数据写入冲突或半成品状态。(Node.js Design Patterns) 合理设计分布式锁或幂等端点，可显著降低此类风险。(GeeksforGeeks)

竞态条件问题示例

// 示例：累加文件大小的竞态条件
async function totalSize(folder) {const files = await folder.getFiles();let total = 0;// Promise.all 并行执行，累加操作可能乱序await Promise.all(files.map(async file => {total += await file.getSize();}));return total; // 结果往往比预期小
}

如上例中，并行更新外部变量 total，因多线程并发计算并累加，最终结果可能不正确。(Hacker News)

// 示例：多个 AJAX 请求不合并
function fetchData() {// 连续发起两次请求ajax('/api/data', res1 => { console.log(res1); });ajax('/api/data', res2 => { console.log(res2); });
}

在此场景下，若不合并请求或去重，响应次序与数据一致性无法保证。(Stack Overflow)

解决方案

1. 避免多次重复请求

• 请求去重：维护一个进行中请求的映射表，若发现已存在相同 URL 或相同参数的请求，则复用前者 Promise；否则发起新请求。(Reddit)
• 节流/防抖：对频繁触发的操作（如搜索联想、按钮多次点击）进行节流或防抖处理，降低请求量。(MDN Web Docs)

2. 使用锁（Mutex）或队列

• 异步互斥锁：引入 async-mutex 等库，确保同一时刻只有一个任务持有锁，其他任务排队等待。(Stack Overflow)
• 队列机制：将需要依次执行的任务放入队列，按顺序依次出队并执行，保证顺序不被打乱。(DEV Community)

3. 使用幂等性设计

• 幂等接口：对提交操作设计幂等性（如使用幂等 ID、幂等 token），服务端检测重复请求后返回相同结果，而不会重复执行写操作。(DEV Community)
• 版本号/ETag：在资源上使用版本号或 ETag，客户端提交时带上版本信息，服务端判断版本一致后才允许更新，否则返回冲突。(GeeksforGeeks)

4. 利用 Promise.race 及超时取消

• Promise.race：在多个同类请求中，只关心最先完成的那个或最先返回成功的结果。(MDN Web Docs)
• 超时控制：结合 AbortController，给请求设置超时或在组件卸载时取消未完成请求，避免过时结果覆盖状态。(GreatFrontEnd)

5. 序列号/时间戳校验

• 附加序列号：每次请求附带单调递增的序列号或时间戳，响应回包后，只有序列号最新的结果才能更新状态，忽略过时响应。(GreatFrontEnd)
• 前后端校验：后端同样校验请求携带的时间戳或版本，拒绝处理过时请求。(MDN Web Docs)

6. 乐观/悲观并发控制

• 乐观锁（Optimistic Locking）：假定冲突较少，通过版本号或校验码检测冲突后重试。(GuidePoint Security)
• 悲观锁（Pessimistic Locking）：在操作开始前先锁定资源，直到操作完成后再释放锁，适用于高冲突场景。(Arcjet blog)

7. 后端分布式锁方案

• 基于 Redis 的分布式锁：利用 SETNX、Lua 脚本或 RedLock 算法实现多实例环境下的互斥访问。(GeeksforGeeks)
• 基于 Zookeeper/Etcd：使用强一致性的协调服务构建可靠分布式锁，适用于关键业务路径。(Node.js Design Patterns)

8. 结合 AbortController 中止请求

• 在前端，使用 new AbortController() 创建控制器，将 signal 传递给 fetch()；在组件卸载或新请求发起时调用 controller.abort()，可优雅取消未完成请求，避免旧响应影响新状态。(wanago.io)
• 后端 Node.js 环境中，也可采用相同 API 取消长时异步任务，如数据库查询或文件 I/O。(betterstack.com)

总结

异步请求竞态条件在现代 Web 开发中无处不在。通过本文所述的多种技术手段——从前端请求去重与互斥锁，到幂等性设计、序列号校验，再到后端分布式锁——可有效防范并发冲突，确保系统状态一致与稳定。针对不同场景灵活选型与组合以上方案，是提升应用健壮性与用户体验的关键。