uniapp的请求封装,如何避免重复提交请求

1、如何封装uniapp,并且如何使用uniapp的封装查看👉uniapp请求封装_uni-app-x 请求封装-CSDN博客​​​​​​​
2、声明一个请求记录的缓存,代码如下

// 存储请求记录
let requestRecords = {};
// 重复请求拦截时间(毫秒)
const INTERCEPT_DURATION = 2000;
const request = (url, data = {}, method = "GET", ContentType = "application/json") => {const requestObj = {data,url,time: Date.now(),};if (method !== "GET") {if (Object.keys(requestRecords).length == 0) {requestRecords = requestObj;} else {const s_url = requestRecords.url; // 请求地址const s_data = requestRecords.data; // 请求数据const s_time = requestRecords.time; // 请求时间if (s_data === requestObj.data &&requestObj.time - s_time < INTERCEPT_DURATION &&s_url === requestObj.url) {uni.showToast({title: "数据正在处理,请勿重复提交",icon: "none",duration: 2000,});return;}requestRecords = requestObj;}}return new Promise(function (resolve, reject) {let header = {};if (uni.getStorageSync("token")) {header = {"Content-Type": ContentType,Authorization: uni.getStorageSync("token"),};} else {header = {"Content-Type": ContentType,};}if (Object.keys(data).length && !data.showLoading) {uni.showLoading({title: "加载中",mask: true,});}console.log("请求参数", data, url);uni.request({url: BASE_URL + url,data,method,header,success: function (res) {console.log("res", res);if (res.data.code == 200) {resolve(res.data);} else if (res.data.code == 401) {uni.navigateTo({url: "/pages/login/login",});} else {if (Object.keys(res.data).length && !data.showLoading) {uni.showToast({title: res.data.msg,icon: "none",duration: 2000,});}reject(res);}},fail: function (err) {console.log("err", err);uni.getNetworkType({success: function (res) {console.log("当前网络状态:", res.networkType);if (res.networkType === "none") {console.log("当前无网络");uni.showToast({title: "当前网络不可用,请检查网络连接",icon: "none",});return;} else {uni.showToast({title: "加载失败,请稍后重试!",icon: "none",duration: 2000,});}},});reject(err);},complete: function () {console.log("结束");if (!data.showLoading) {uni.hideLoading();}},});});
};


 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.pswp.cn/pingmian/84397.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【云原生】阿里云SLS日志自定义字段标签实现日志告警

把业务日志接入到阿里云SLS日志服务后,我们想自定义字段做为标签,在做日志告警的时候,可以做为查询结果使用 自定义标签 样例: 一个典型的java log初始化日志格式 [ywgy-app-service:10.10.6.100:30000] 2025-06-10 08:40:53.444 INFO 1[TID: N/A][uId:][sId:][tId:][po…

Linux下制作Nginx绿色免安装包

linux下安装nginx比较繁琐&#xff0c;遇到内网部署环境更是麻烦。根据经验将nginx打包一个绿色版进行使用。 大体思路&#xff0c;在一台正常的机器上面制造好安装包&#xff0c;然后上传到内网服务器&#xff0c;解压使用 安装包制作 安装依赖 yum install gcc-c pcre per…

脑机新手指南(七):OpenBCI_GUI:从环境搭建到数据可视化(上)

一、OpenBCI_GUI 项目概述 &#xff08;一&#xff09;项目背景与目标 OpenBCI 是一个开源的脑电信号采集硬件平台&#xff0c;其配套的 OpenBCI_GUI 则是专为该硬件设计的图形化界面工具。对于研究人员、开发者和学生而言&#xff0c;首次接触 OpenBCI 设备时&#xff0c;往…

【Zephyr 系列 18】分布式传感网络系统设计:从 BLE Mesh 到边缘网关的数据闭环

🧠关键词:Zephyr、BLE Mesh、边缘网关、分布式网络、状态同步、组播、数据聚合、远程控制 📌适合人群:希望实现 BLE Mesh 与网关联合控制、多设备组网协作、数据闭环采集的开发者 📊预计字数:5500+ 字 🧭 背景与系统目标 在工业、农业、仓储等场景中,我们常见以下…

【区块链基础】区块链的 Fork(分叉)深度解析:原理、类型、历史案例及共识机制的影响

区块链的 Fork(分叉)全面解析:原理、类型、历史案例及共识机制的影响 在区块链技术的发展过程中,Fork(分叉)现象是不可避免且极具影响力的一个环节。理解区块链分叉的形成原因、具体表现以及共识机制对分叉的作用,对于深入把握区块链技术架构及其治理机制至关重要。 本…

开源 java android app 开发(十一)调试、发布

文章的目的为了记录使用java 进行android app 开发学习的经历。本职为嵌入式软件开发&#xff0c;公司安排开发app&#xff0c;临时学习&#xff0c;完成app的开发。开发流程和要点有些记忆模糊&#xff0c;赶紧记录&#xff0c;防止忘记。 相关链接&#xff1a; 开源 java an…

数据的聚合

聚合可以实现对文档数据的统计&#xff0c;分析&#xff0c;运算&#xff0c;聚合常见有三类&#xff08;聚合的值一定不能是text类型的&#xff09;&#xff1a; 桶&#xff08;Bucket&#xff09;聚合&#xff1a;用来对文档做分组。 度量&#xff08;Metric&#xff09;聚合…

C++默认构造函数被隐式删除

一、 看cppreference时&#xff0c;发现被隐式删除的构造函数&#xff0c;查询做如下记录&#xff1a; struct F {int& ref; // reference memberconst int c; // const member// F::F() is implicitly defined as deleted };// user declared copy constructor (either …

6.ref创建对象类型的响应式数据

其实ref接收的数据可以是&#xff1a;基本类型、对象类型。若ref接收的是对象类型&#xff0c;内部其实也是调用了reactive函数。 <template><div class"person"><h2>汽车信息&#xff1a;一台{{ car.brand }}汽车&#xff0c;价值{{ car.price }…

如何设计一个用于大规模生产任务的人工智能AI系统

部署一个SOTA模型&#xff0c;让它服务数百万用户&#xff0c;处理TB级别的数据&#xff0c;并且7x24小时可靠运行是件非常有挑战性的工作。我们将探讨构建一个能够创建LLM、多模态模型以及各种其他AI产品的大规模AI系统所需的每个开发阶段。每个开发阶段如何相互关联&#xff…

国债与企业债:稳健与高收益的债券选择

债券市场是投资者获取稳定收益的重要渠道&#xff0c;而国债和企业债是最常见的两种债券类型。它们虽然都属于固定收益类产品&#xff0c;但在风险、收益和适用人群上有显著区别。 1. 概念对比&#xff1a;国家信用 vs. 企业信用 &#xff08;1&#xff09;国债&#xff08;政…

MySQL提升

事务 事务&#xff1a;在多个操作合在一起视为一个整体。要么就不做、要么就做完。 事务应该满足ACID A : 原子性。不可分割。C : 一致性。追求的目标&#xff0c;在开始到结束没有发生预定外的情况。I : 隔离性。不同的事务是独立的。D : 持久性。系统崩溃&#xff0c;数据依然…

MySQL用户和授权

开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务&#xff1a; test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…

基础篇:4. 页面渲染流程与性能优化

页面渲染流程与性能优化详解&#xff08;完整版&#xff09; 一、现代浏览器渲染流程&#xff08;详细说明&#xff09; 1. 构建DOM树 浏览器接收到HTML文档后&#xff0c;会逐步解析并构建DOM&#xff08;Document Object Model&#xff09;树。具体过程如下&#xff1a; (…

vue3 vite.config.js 引入bem.scss文件报错

[sass] Can’t find stylesheet to import. ╷ 1 │ use “/bem.scss” as *; │ ^^^^^^^^^^^^^^^^^^^^^^ ╵ src\App.vue 1:1 root stylesheet 分析 我们遇到了一个在Vue3项目中使用Vite时&#xff0c;在vite.config.js中引入bem.scss文件报错的问题。错误信息指出在App.vue…

python打卡第50天

知识点回顾&#xff1a; resnet结构解析CBAM放置位置的思考针对预训练模型的训练策略 差异化学习率三阶段微调 现在我们思考下&#xff0c;是否可以对于预训练模型增加模块来优化其效果&#xff0c;这里我们会遇到一个问题 预训练模型的结构和权重是固定的&#xff0c;如果修…

MySQL 并发控制和日志

MySQL 是一个广泛使用的关系数据库管理系统&#xff0c;在高并发环境中&#xff0c;如何有效地控制并发和管理日志至关重要。本文将详细介绍 MySQL 的并发控制机制和日志管理策略&#xff0c;以帮助开发人员和数据库管理员更好地理解和优化数据库性能。 一、并发控制 并发控制…

创意意境古风唯美中国风PPT模版分享

故宫文化经典传统PPT模版&#xff0c;创意中国风PPT模版&#xff0c;朱红简约新国风PPT模版&#xff0c;意境中国风PPT模版&#xff0c;最爱中国风PPT模版&#xff0c;意境古风唯美商业计划书PPT模版 创意意境古风唯美中国风PPT模版分享&#xff1a;古风中国风PTP模版分享https…

系统网站首页三种常见布局vue+elementui

左中右菜单布局 <template><el-container><el-menu class"el-menu-vertical-demo" style"width: 80px; height: 100vh;"background-color"#545c64"text-color"#fff"active-text-color"#ffd04b"select"…

复习Git命令、Git命令使用流程、VSCode+Git插件管理工程源码

目录 1 引言 2 直接整理一个常用的流程&#xff0c;而不是死记硬背各种命令 3 解决冲突的说明和理解 4 git fetch的说明和理解 5 真正开发不用Git命令&#xff0c;而是使用VSCode插件管理工程 1 引言 以前主要用svn&#xff0c;Git用的少&#xff0c;这次再复习一下Git命…