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;
}
相关推荐
訾博ZiBo5 小时前
【Vibe Coding】001-前端界面常用布局
前端
软件技术NINI5 小时前
MATLAB疑难诊疗:从调试到优化的全攻略
javascript·css·python·html
IT_陈寒5 小时前
《Redis性能翻倍的7个冷门技巧,90%开发者都不知道!》
前端·人工智能·后端
歪歪1005 小时前
React Native开发Android&IOS流程完整指南
android·开发语言·前端·react native·ios·前端框架
知识分享小能手5 小时前
uni-app 入门学习教程,从入门到精通,uni-app组件 —— 知识点详解与实战案例(4)
前端·javascript·学习·微信小程序·小程序·前端框架·uni-app
ZYMFZ5 小时前
python面向对象
前端·数据库·python
长空任鸟飞_阿康5 小时前
在 Vue 3.5 中优雅地集成 wangEditor,并定制“AI 工具”下拉菜单(总结/润色/翻译)
前端·vue.js·人工智能
lapiii3585 小时前
快速学完React计划(第一天)
前端·react.js·前端框架
苏打水com5 小时前
从 HTML/CSS/JS 到 React:前端进阶的平滑过渡指南
前端·javascript·html