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;
}
相关推荐
Nan_Shu_6148 分钟前
Web前端面试题(2)
前端
知识分享小能手14 分钟前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队1 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光1 小时前
css之一个元素可以同时应用多个动画效果
前端·css
萌萌哒草头将军1 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite
huangql5202 小时前
npm 发布流程——从创建组件到发布到 npm 仓库
前端·npm·node.js
Qlittleboy2 小时前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app
Days20502 小时前
LeaferJS好用的 Canvas 引擎
前端·开源
小白菜学前端2 小时前
vue2 常用内置指令总结
前端·vue.js
林_深时见鹿2 小时前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js