uniapp 防止重复提交数据
当用户快速点击按钮时候。我们可以统一在 请求拦截 中做防止重复提交数据的处理
以下是使用uview2封装的request请求
import { autoLogin, getUserInfo } from '@/utils/method.js'
import { refreshToken } from '@/api/login.js'
const serversUrl = require('./serversUrl.js').serversUrl// 白名单
const whiteList = ['/szg-admin/api/app/wxLogin','/szg-admin/api/app/bingMobile','/auth/client/sms/sendCode','/auth/client/smsCode/login'
]module.exports = (vm) => {// 初始化请求配置uni.$u.http.setConfig((defaultConfig) => {// #ifdef H5defaultConfig.baseURL = '/h5api'// #endif// #ifndef H5defaultConfig.baseURL = serversUrldefaultConfig.sslVerify = falsedefaultConfig.firstIpv4 = false// #endif// 要加上这个 Content-type,不然app端请求会得不到响应defaultConfig.header['Content-Type'] = 'application/json;charset=UTF-8'defaultConfig.timeout = 20000return defaultConfig})// 请求拦截uni.$u.http.interceptors.request.use((config) => {// 初始化请求拦截器时,会执行此方法,此时data为undefined,赋予默认{}config.data = config.data || {}// 防止数据重复提交if (config.method === 'POST' || config.method === 'PUT' || config.method === 'DELETE') {const requestObj = {url: config.url,data: typeof config.data === 'object' ? JSON.stringify(config.data) : config.data,time: new Date().getTime()}const storageRequestObj = uni.getStorageSync('storageRequestObj')if (!storageRequestObj) {uni.setStorageSync('storageRequestObj', requestObj)} else {const s_url = storageRequestObj.urlconst s_data = storageRequestObj.dataconst s_time = storageRequestObj.time// 间隔时间(ms),小于此时间视为重复提交const interval = 1000if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {return Promise.reject('数据正在处理,请勿重复提交')} else {uni.setStorageSync('storageRequestObj', requestObj)}}}if (whiteList.includes(config.url)) return configconst token = uni.getStorageSync('token')if (token) {config.header.Authorization = `Bearer ${ token }`}return config}, err => {// 可使用async await 做异步操作return Promise.reject(err)})// 响应拦截uni.$u.http.interceptors.response.use((response) => {// console.log('响应拦截==', response);if (response.statusCode === 200 && response.data.code == 401) {uni.showModal({title: '页面停留超时',content: '请重新进入后继续操作',confirmText: '重新进入',showCancel: false,success: async e => {uni.removeStorageSync('token')// #ifdef MP-WEIXINawait autoLogin()// #endif// #ifndef MP-WEIXIN// 如果当前就在登录页面,不进行跳转if (uni.$u.page() != '/pages/login') {uni.navigateTo({ url: '/pages/login' })}// #endifreturn Promise.reject(response.data.msg || '页面停留超时')}})} else if (response.statusCode === 200) {return response.data} else {uni.showModal({title: '温馨提示',content: response.data.msg || response.data.error,showCancel: false})return Promise.reject(response.data.msg)}}, (err) => {// 对响应错误做点什么 statusCode !== 200console.log('<<<<<<响应错误>>>>>>', err)return Promise.reject(err)})
}
数据重复部分,可以直接复制这块代码过去放到你们的项目去
// 防止数据重复提交
if (config.method === 'POST' || config.method === 'PUT' || config.method === 'DELETE') {const requestObj = {url: config.url,data: typeof config.data === 'object' ? JSON.stringify(config.data) : config.data,time: new Date().getTime()}const storageRequestObj = uni.getStorageSync('storageRequestObj')if (!storageRequestObj) {uni.setStorageSync('storageRequestObj', requestObj)} else {const s_url = storageRequestObj.urlconst s_data = storageRequestObj.dataconst s_time = storageRequestObj.time// 间隔时间(ms),小于此时间视为重复提交const interval = 1000if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {return Promise.reject('数据正在处理,请勿重复提交')} else {uni.setStorageSync('storageRequestObj', requestObj)}}
}
原文作者:uniapp 防止重复提交数据_uni.$u.throttle-CSDN博客
相关文章:
uniapp 防止重复提交数据
当用户快速点击按钮时候。我们可以统一在 请求拦截 中做防止重复提交数据的处理 以下是使用uview2封装的request请求 import { autoLogin, getUserInfo } from /utils/method.js import { refreshToken } from /api/login.js const serversUrl require(./serversUrl.js).ser…...
线程池工具类
线程池简述 为什么需要一个线程池工具类? 答:整个项目,用到线程执行任务的地方很多,不可能哪里用到就在那里直接new一个线程执行,这样资源得不到重复利用,一旦线程过多就会导致内存不足。 线程池的好处是…...
印尼“支付宝” DANA 如何借力 OceanBase 实现3个“关键零”
当前,移动支付在东南亚正迅猛发展,据谷歌、淡马锡与贝恩公司发布的报告预测,东盟地区蓬勃兴起的移动支付市场有望在2030年突破至2万亿美元的交易规模。 在此背景下,DANA作为印尼——东南亚最大经济体中的一员,秉持着推…...
2018-2022 年份微博签到数据集
前阵子接到一个实验室老师的需求,采集五年前(2024-52019)过年前后的北京微博签到数据。 前两年采集的深圳签到数据是 2022 年是当年的尚可,这次虽然时间跨度只有两个月,但是由于时间太过久远,但是颇费了一…...
Avalonia开发实践(二)——开发带边框的Grid
一、开发背景 在实际开发工作中,常常会用到Grid进行布局。为了美观考虑,会给每个格子加上边框,如下图: 原生的Grid虽然有ShowGridLines属性可以控制显示格子之间的线,但线的样式不能定义,可以说此功能非常…...
Java泛型的定义与运用
泛型 泛型的作用从使用层面上来说是统一数据类型,防止将来的数据转换异常。从定义层面上来说,定义带泛型的类,方法等,将来使用的时候给泛型确定什么类型,泛型就会变成什么类型,凡是涉及到泛型的都会变成确…...
Java如何自定义注解及在SpringBoot中的应用
注解 注解(Annotation),也叫元数据。一种代码级别的说明。它是JDK1.5及以后版本引入的一个特性,与类、接口、枚举是在同一个层次。它可以声明在包、类、字段、方法、局部变量、方法参数等的前面,用来对这些元素进行说…...
微软 Edge 浏览器全解析
微软 Edge 是微软推出的一个现代化浏览器,继承了 Internet Explorer(IE)的部分功能,但在速度、安全性和兼容性方面做出了很大改进。下面是对微软 Edge 浏览器的详细解析,包括其特点、安装、配置和常见问题的解答。 微软 Edge 浏览器的特点 基于 Chromium 内核 Edge 浏览…...
C++ 八股(1)
C语言中strcpy为什么不安全?如何解决? 主要原因是缺乏对输入长度的边界检查,容易导致缓冲区溢出漏洞。 解决:可以使用strncpy函数替代,或者在程序最顶端加入代码段 #define _CRT_SECURE_NO_WARNINGS 缓冲区溢出 …...
超高精电容传感器PCAP01调试+LABVIEW数据可视化调试手记
PCAP01超高精电容传感芯片STM32LabView可视化 文章目录 PCAP01超高精电容传感芯片STM32LabView可视化一、PCAP01介绍1.1、PCAP01引脚定义1.2、电容测量1.3、温度测量1.4、PCAP典型测试电路 二、PCAP01的STM32驱动2.1、SPI协议配置2.2、PCAP01浮空电容测量内部温度测量操作流程 …...
5.更多
发现一个项目与 MkDocs 类似的项目 PyMdown 拓展文档 ,等待探索。 1.排版模仿 以下网站使用 MkDocs 构建 Material for MkDocs 的美化 - Charles Les Notebook (charleschile.com) Documentation - Home Assistant (home-assistant.io) Godot Docs – master bra…...
ConditionalOnJndi注解使用介绍、应用场景以及示例代码
概述 ConditionalOnJndi 是 Spring Framework 中的一个条件注解,用于在特定的 JNDI (Java Naming and Directory Interface) 环境条件下决定是否创建一个 bean 或配置一个 bean。JNDI 是 Java EE 规范中定义的一种用于访问命名和目录服务的 API,它允许 …...
Spring Cloud 引入
1.单体架构: 定义:所有的功能实现都打包成一个项目 带来的后果: ①后端服务器的压力越来越大,负载越来越高,甚至出现无法访问的情况 ②业务越来越复杂,为了满足用户的需求,单体应用也会越来越…...
自定义波形图View,LayoutInflater动态加载控件保存为本地图片
效果图: 页面布局: <?xml version"1.0" encoding"utf-8"?><LinearLayout xmlns:android"http://schemas.android.com/apk/res/android"xmlns:tools"http://schemas.android.com/tools"android:la…...
每日一道算法题 求最小公倍数
题目 求最小公倍数_牛客题霸_牛客网 (nowcoder.com) Python 辗转相除法 dividend,divisormap(int,input().split()) #被除数,除数 # remainder0 余数 # 最小公倍数 def lcm(dividend,divisor):# 最大公约数def gcd(dividend,divisor):if 0divisor:return divid…...
【OCC学习18】三维几何对象工具包:TKG3d
【OCC学习18】三维几何对象工具包:TKG3d loveoobaby 已于 2022-08-26 10:10:32 修改 阅读量1.2k 收藏 10 点赞数 1 分类专栏: OpenCascade学习笔记 文章标签: 学习 版权 OpenCascade学习笔记 专栏收录该内容 24 篇文章60 订阅 订阅专栏…...
【Unix】SunOS/Oracle Solaris系统介绍
一.SunOS系统介绍 SunOS 是由 Sun Microsystems 开发的 Unix 操作系统。它最初是为 Sun 的 SPARC 架构计算机设计的,后来也支持了 Intel x86 架构。SunOS 是基于 UNIX System V 4.1 版本,并且随着时间的发展,SunOS 经历了多个版本迭代&#…...
氛围感视频素材高级感的去哪里找啊?带氛围感的素材网站库分享
亲爱的创作者们,大家好!今天我们来聊聊视频创作中至关重要的一点——氛围感。一个好的视频,不仅要有视觉冲击力,还要能够触动观众的情感。那我们应该去哪里寻找这些充满氛围感且高级的视频素材呢?别急,我这…...
基于Java的学生选课系统
第1章 系统概述 1.1概述 背景:随着计算机网络技术的发展,Web 数据库技术已成为应用最为广泛的网站架构基础技术。学生选课系统作为教育单位不可缺少的部分,其内容对于学校的决策者和管理者至关重要。传统的人工管理方式存在效率低、保密性差等…...
802.11漫游流程简单解析与笔记_Part2_05_wpa_supplicant如何通过nl80211控制内核开始关联
最近在进行和802.11漫游有关的工作,需要对wpa_supplicant认证流程和漫游过程有更多的了解,所以通过阅读论文等方式,记录整理漫游相关知识。Part1将记录802.11漫游的基本流程、802.11R的基本流程、与认证和漫游都有关的三层秘钥基础。Part1将包…...
第19节 Node.js Express 框架
Express 是一个为Node.js设计的web开发框架,它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用,和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...
19c补丁后oracle属主变化,导致不能识别磁盘组
补丁后服务器重启,数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后,存在与用户组权限相关的问题。具体表现为,Oracle 实例的运行用户(oracle)和集…...
【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密
在实际项目中,用户注册、登录、修改密码等操作,都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输,在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...
CMake基础:构建流程详解
目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...
基于数字孪生的水厂可视化平台建设:架构与实践
分享大纲: 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年,数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段,基于数字孪生的水厂可视化平台的…...
linux 错误码总结
1,错误码的概念与作用 在Linux系统中,错误码是系统调用或库函数在执行失败时返回的特定数值,用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递,errno由操作系统维护,保存最近一次发生的错误信息。值得注意的是,errno的值在每次系统调用或函数调用失败时…...
Nuxt.js 中的路由配置详解
Nuxt.js 通过其内置的路由系统简化了应用的路由配置,使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...
【配置 YOLOX 用于按目录分类的图片数据集】
现在的图标点选越来越多,如何一步解决,采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集(每个目录代表一个类别,目录下是该类别的所有图片),你需要进行以下配置步骤&#x…...
Android15默认授权浮窗权限
我们经常有那种需求,客户需要定制的apk集成在ROM中,并且默认授予其【显示在其他应用的上层】权限,也就是我们常说的浮窗权限,那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...
Java线上CPU飙高问题排查全指南
一、引言 在Java应用的线上运行环境中,CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时,通常会导致应用响应缓慢,甚至服务不可用,严重影响用户体验和业务运行。因此,掌握一套科学有效的CPU飙高问题排查方法&…...
