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;
}
相关推荐
LeeAt6 分钟前
真的!真的就一句话就能明白this指向问题
前端·javascript
阳火锅7 分钟前
都2025年了,来看看前端如何给刘亦菲加个水印吧!
前端·vue.js·面试
hahala233324 分钟前
ESLint 提交前校验技术方案
前端
夕水1 小时前
ew-vue-component:Vue 3 动态组件渲染解决方案的使用介绍
前端·vue.js
Winwin1 小时前
js基础-数据类型
javascript
Winwin1 小时前
哈?Boolean能作为回调函数?
javascript
我麻烦大了1 小时前
实现一个简单的Vue响应式
前端·vue.js
Shartin1 小时前
CPT208-Human-Centric Computing: Prototype Design Optimization原型设计优化
开发语言·javascript·原型模式
独立开阀者_FwtCoder1 小时前
你用 Cursor 写公司的代码安全吗?
前端·javascript·github
dme.1 小时前
Javascript之DOM操作
开发语言·javascript·爬虫·python·ecmascript