axios竟态问题
竟态问题
在我们日常开发经常遇到一些竟态问题
例子1
现象1
表格分页，如果设置请求loading,
先切换到分页第99页，迅速在又切换到第1页，最后列表显示的是第99页数据。
原因
由于第99页请求数据花费时间可能500ms,第1页数据只需要100ms,第1页数据请求比较快，第99页数据返回慢，所以第99页数据会覆盖第一页数据。
现象2
表单具有提交按钮，如果没有设置提交请求loading时，连续点击两次，就会触发两次表单提交
原因
请求没有做拦截，第一次请求没有结束，又能触发请求
axios中如何简单防止竟态问题
【注】这里只是简单做了防止重复点击
在axios 请求拦截器中可以设置 cancelToken
import axios from 'axios';
const cusAxiosFERD = axios.create({});
const cancelToken = axios.CancelToken;
const source = cancelToken.source();
const cacheRequest = {};
// 需要处理竞态问题的 接口
const urls = ['/xxx'];
cusAxiosFERD.interceptors.request.use( (config) => {
const curUrl = config.url;
if(urls.some(u=>curUrl.indexOf(u) > -1 ) && config.headers.isLimit){
cacheRequest[curUrl] && cacheRequest[curUrl]();
config.cancelToken = new axios.CancelToken(function executor(c) {
cacheRequest[curUrl] = c;
})
}
return config;
}