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;
}
相关推荐
Renounce几秒前
【Android】让 Android 界面 “动” 起来:动画知识点大起底
前端
Asort2 分钟前
JavaScript设计模式(十四)——命令模式:解耦请求发送者与接收者
前端·javascript·设计模式
小茴香35310 分钟前
Vue 脚手架(Vue CLI)
前端·javascript·vue.js
午安~婉16 分钟前
ESLint
前端·eslint·检查
“抚琴”的人16 分钟前
C#中获取程序执行时间
服务器·前端·c#
掘金一周27 分钟前
Flex 布局下文字省略不生效?原因其实很简单| 掘金一周 10.16
前端
你的电影很有趣28 分钟前
lesson72:Node.js 安全实战:Crypto-Js 4.2.0 与 Express 加密体系构建指南
javascript·安全·node.js
Stringzhua32 分钟前
Vue的Axios介绍【9】
前端·javascript·vue.js
渣哥36 分钟前
从 READ_UNCOMMITTED 到 SERIALIZABLE:Spring 事务隔离级别全解析
javascript·后端·面试
云霄IT40 分钟前
绕过Frida检测反调试的一些办法
android·javascript