vue处理重复请求

处理方法记录第一次的请求时间-后面的请求时间,判断间隔时间提示请求重复

// 登录方法 定义repeatSubmit属性控制是否重复请求
export function login(username, password, code, uuid) {
  const data = {
    username,
    password,
    code,
    uuid
  }
  return request({
    url: '/login',
    headers: {
      isToken: false,
      repeatSubmit: false
    },
    method: 'post',
    data: data
  })
}

request.js

  // 是否需要防止数据重复提交
  const isRepeatSubmit = (config.headers || {}).repeatSubmit === false

if (!isRepeatSubmit && (config.method === 'post' || config.method === 'put')) {
    const requestObj = {
      url: config.url,
      data: typeof config.data === 'object' ? JSON.stringify(config.data) : config.data,
      time: new Date().getTime()
    }
    const requestSize = Object.keys(JSON.stringify(requestObj)).length; // 请求数据大小
    const limitSize = 5 * 1024 * 1024; // 限制存放数据5M
    if (requestSize >= limitSize) {
      console.warn(`[${config.url}]: ` + '请求数据大小超出允许的5M限制,无法进行防重复提交验证。')
      return config;
    }
    const sessionObj = cache.session.getJSON('sessionObj')
    if (sessionObj === undefined || sessionObj === null || sessionObj === '') {
      cache.session.setJSON('sessionObj', requestObj)
    } else {
      const s_url = sessionObj.url;                // 请求地址
      const s_data = sessionObj.data;              // 请求数据
      const s_time = sessionObj.time;              // 请求时间
      const interval = 1000;                       // 间隔时间(ms),小于此时间视为重复提交
      console.log(requestObj.time - s_time < interval,"requestObj.time - s_time < interval");
      if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {
        const message = '数据正在处理,请勿重复提交';
        console.warn(`[${s_url}]: ` + message)
        console.log('数据正在处理,请勿重复提交')
        return Promise.reject(new Error(message))
      } else {
        cache.session.setJSON('sessionObj', requestObj)
      }
    }
  }

相关推荐

  1. vue处理重复请求

    2024-07-10 08:36:03       7 阅读
  2. Spring Boot 优雅地处理重复请求

    2024-07-10 08:36:03       39 阅读
  3. Vue路由切换 & Axios接口取消重复请求

    2024-07-10 08:36:03       26 阅读
  4. vue 怎么处理get请求,接收url地址栏参数

    2024-07-10 08:36:03       22 阅读

最近更新

  1. MySQL

    MySQL

    2024-07-10 08:36:03      0 阅读
  2. C++中的atomic:原子

    2024-07-10 08:36:03       0 阅读
  3. Nacos 面试题及答案整理,最新面试题

    2024-07-10 08:36:03       0 阅读
  4. 【Unity】RPG2D龙城纷争(十五)特殊加成型要诀

    2024-07-10 08:36:03       0 阅读

热门阅读

  1. 深度学习:从数据采集到模型测试的全面指南

    2024-07-10 08:36:03       9 阅读
  2. jQuery Mobile 实例

    2024-07-10 08:36:03       6 阅读
  3. Electron 简单搭建项目

    2024-07-10 08:36:03       6 阅读
  4. adb 常用的命令总结

    2024-07-10 08:36:03       12 阅读
  5. gcc: options: -specs

    2024-07-10 08:36:03       7 阅读
  6. Python题解Leetcode Hot 100之栈和堆

    2024-07-10 08:36:03       7 阅读
  7. docker容器如何与本地配置文件关联

    2024-07-10 08:36:03       8 阅读
  8. SQL 字段类型-上

    2024-07-10 08:36:03       13 阅读
  9. C++ 入门04:数组与字符串

    2024-07-10 08:36:03       6 阅读