美文网首页
axios 重复请求

axios 重复请求

作者: 打1折的暧昧 | 来源:发表于2017-11-24 17:03 被阅读0次

先贴上代码

let pending = []; //声明一个数组用于存储每个ajax请求的取消函数和ajax标识
let cancelToken = axios.CancelToken;
let removePending = (config) => {
  for (let p in pending) {
    if (pending[p].u === config.url + '&' + config.method) { //当当前请求在数组中存在时执行函数体
      pending[p].f(); //执行取消操作
      pending.splice(p, 1); //把这条记录从数组中移除
    }
  }
}

let cutReq = (config) => {
  for (let p in pending) {
    if (pending[p].u === config.url + '&' + config.method) { //当当前请求在数组中存在时执行函数体
      return true;
    }
  }
}

//添加请求拦截器
axios.interceptors.request.use(config => {

  let flag = cutReq(config);

  if (flag === true) return null; // 当上一次相同请求未完成时,无法进行第二次相同请求
  config.cancelToken = new cancelToken((c) => {
    // 这里的ajax标识我是用请求地址&请求方式拼接的字符串,当然你可以选择其他的一些方式
    pending.push({ u: config.url + '&' + config.method, f: c });
  });

  return config;
}, error => {
  return Promise.reject(error);
});

//添加响应拦截器
axios.interceptors.response.use(res => {
  removePending(res.config);  //在一个ajax响应后再执行一下取消操作,把已经完成的请求从pending中移除
  return res;
}, error => {
  return { data: {} };
});

参考:axios重复请求

只是修改了请求部分代码。有空可以看看参考链接。他里面的方法不太适合我现在的情况。

相关文章

  • axios 重复请求

    先贴上代码 参考:axios重复请求 只是修改了请求部分代码。有空可以看看参考链接。他里面的方法不太适合我现在的情况。

  • axios 重复请求

    需要在axios配置里面加上以上代码。 ``` letpending=[];//声明一个数组用于存储每个ajax请...

  • Axios 取消重复请求

    有什么用? 当用户频繁点击在短时间内发送多个 ajax 请求,但是由于网络原因服务器数据无法及时响应返回,这时候,...

  • axios取消重复请求

    在开发中,经常会遇到接口重复请求导致的各种问题。 对于重复的get请求,会导致页面更新多次,发生页面抖动的现象,影...

  • axios 防重复请求

  • axios取消重复请求

    当第一个axios发起连续请求的时候,这时候我们就需要取消第二、第三个请求,因为他们都是同一个请求发起。 来看一下...

  • 重复点击,请求事件问题

    1.axios 原理,请求响应拦截重复请求 https://mp.weixin.qq.com/s/GtHBgzQ5...

  • axios 代理服务器

    npm i axios 下载 import axios from 'axios' 引入 发送请求axios请求 跨...

  • Axios如何取消重复请求

    在 Web 项目开发过程中,我们经常会遇到重复请求的场景,如果系统不对重复的请求进行处理,则可能会导致系统出现各种...

  • Axios如何取消重复请求

    在实际开发中,我们需要对用户发起的重复请求进行拦截处理,比如用户快速点击提交按钮。 对于重复的 get 请求,会导...

网友评论

      本文标题:axios 重复请求

      本文链接:https://www.haomeiwen.com/subject/xoefbxtx.html