--- theme: github highlight: atom-one-dark --- # [What]什么是竞态问题它旨在描述一个系统或者进程的输出依赖于不受控制的事件执行顺序。这个词语来源于两个信号彼此竞争、影响谁先输出 # [Why]为什么会出现竞态问题具体到前端开发中，竞态问题出现的原因是：**我们无法保证异步请求的完成顺序严格等于它们的开始顺序** 举个例子：用户在搜索框输入关键词进行搜索，若短时间内连续键入两次，第二次的搜索结果比第一次的先返回在开发者没有实现并发控制的前提下，最终展示的就是第一次搜索的结果，不符合用户的预期 # [How]如何解决竞态问题 ## 加锁竞态问题的本质是多个请求同时进行，无法保证谁先结束那么最简单粗暴的方式就是：**在一个请求完成前，不允许发起新的请求** 可以通过给触发元素或者请求函数加锁，来实现上述的效果 1. 给触发元素加锁维护loading状态，设置按钮在loading=true时禁用 ```TypeScript function App() { const [loading, setLoading] = useState(false) // 发送异步请求 async function getData() { setLoading(true) const resp = await axios.get('/xxx') setLoading(false) } function handleClick() { getData() } return (