## 接口竞态问题处理
需求场景
- 针对tab页签切换时，接口响应时长不同导致数据错乱
解决方法
每次切换时，正对上一次的请求进行中断处理
-
使用axioxs.CancelToken.source()方法进行中断处理
let cancelTokenSource = null; ()=>{ // 如果上一次请求还没完成，先取消它 if (cancelTokenSource) { cancelTokenSource.cancel('取消上一次请求'); } // 创建新的取消令牌 cancelTokenSource = axios.CancelToken.source(); axios.get('/api', { params: { tabId },//参数体 cancelToken: cancelTokenSource.token,//其他配置项 }) 复制代码
-
使用 AbortController 中断
-
此方案的axios的版本要高于0.22.0
-
node的版本要高于18
import axios from 'axios'; let controller: AbortController | null = null; ()=>{ // 如果上一次请求还没完成，先取消它 if (controller) { controller.abort(); } // 创建新的 AbortController controller = new AbortController(); axios.get('/api', { params: { tabId },//参数体 signal: controller.signal, // 传入 signal //其他配置项 }).then(()=>{
}).catch( error => { if (axios.isCancel(error)) { // 旧的 CancelToken 取消方式判断 console.log('请求被取消'); } else if (error.name === 'CanceledError') { // AbortController 取消请求的错误名 console.log('请求被取消 (AbortController)'); } else { console.error('请求错误', error); } }); 复制代码
未解决点
未解决点：
- 此处遇到了contriller.abort()为undefined
