zoukankan      html  css  js  c++  java
  • axios 重复点击利用CancelToken阻止请求多次发送

        import axios from 'axios';
        
        axios.defaults.timeout = 5000;
        axios.defaults.baseURL ='';
    
        let pending = []; //声明一个数组用于存储每个ajax请求的取消函数和ajax标识
        let cancelToken = axios.CancelToken;
        let removePending = (ever) => {
            for(let p in pending){
                if(pending[p].u === ever.url + '&' + ever.method) { //当当前请求在数组中存在时执行函数体
                    pending[p].f(); //执行取消操作
                    pending.splice(p, 1); //把这条记录从数组中移除
                }
            }
        }
        
        //http request 拦截器
        axios.interceptors.request.use(
        config => {
          config.data = JSON.stringify(config.data);
          config.headers = {
            'Content-Type':'application/x-www-form-urlencoded'
          }
          // ------------------------------------------------------------------------------------
          removePending(config); //在一个ajax发送前执行一下取消操作
          config.cancelToken = new cancelToken((c)=>{
             // 这里的ajax标识我是用请求地址&请求方式拼接的字符串,当然你可以选择其他的一些方式
             pending.push({ u: config.url + '&' + config.method, f: c });  
          });
          // -----------------------------------------------------------------------------------------
          return config;
        },
        error => {
          return Promise.reject(err);
        }
      );
      //http response 拦截器
      axios.interceptors.response.use(
        response => {
          // ------------------------------------------------------------------------------------------
          removePending(res.config);  //在一个ajax响应后再执行一下取消操作,把已经完成的请求从pending中移除
          // -------------------------------------------------------------------------------------------
          if(response.data.errCode ==2){
            router.push({
              path:"/login",
              querry:{redirect:router.currentRoute.fullPath}//从哪个页面跳转
            })
          }
          return response;
        },
        error => {
          return Promise.reject(error)
        }
      )
  • 相关阅读:
    P1128 [HNOI2001]求正整数
    zabbix-server端监控MySQL服务
    对服务器磁盘、CPU、内存使用状态,设置163邮件告警
    JDK8 的FullGC 之 metaspace
    JDK8-废弃永久代(PermGen)迎来元空间(Metaspace)
    JVM的方法区和永久带是什么关系?
    如何使用start with connect by prior递归用法
    JVM原理讲解和调优
    jvm 性能调优工具之 jstat
    记一次HBase内存泄漏导致RegionServer挂掉问题
  • 原文地址:https://www.cnblogs.com/shuaishuaidejun/p/10457473.html
Copyright © 2011-2022 走看看