湖南网站设计,亚马逊平台官网,重庆电子工程,中山网站方案竟态问题
在我们日常开发经常遇到一些竟态问题
例子1
现象1 表格分页#xff0c;如果设置请求loading, 先切换到分页第99页#xff0c;迅速在又切换到第1页#xff0c;最后列表显示的是第99页数据。 原因 由于第99页请求数据花费时间可能500ms,第1页数据只需要100ms,第1页…竟态问题
在我们日常开发经常遇到一些竟态问题
例子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(ucurUrl.indexOf(u) -1 ) config.headers.isLimit){cacheRequest[curUrl] cacheRequest[curUrl]();config.cancelToken new axios.CancelToken(function executor(c) {cacheRequest[curUrl] c;})}return config;
}
