防重复请求方法总结 wx.request-微信小程序

embedded/2025/4/1 7:54:50/

小程序>微信小程序中,为了防止 wx.request 的重复请求,可以通过以下几种方式来实现:

1.使用 wx.showLoading 和 wx.hideLoading
在请求中,使用 wx.showLoading 显示加载动画,请求完成后使用 wx.hideLoading 隐藏加载动画。

function request(url, data, method = 'GET') {// 如果正在请求,显示加载提示wx.showLoading({title: '加载中...', // 提示内容mask: true, // 是否显示透明蒙层,防止触摸穿透});wx.request({url: url,data: data,method: method,success(res) {// 处理成功回调console.log('请求成功', res);},fail(err) {// 处理失败回调console.error('请求失败', err);},complete() {// 无论成功或失败,请求完成后隐藏加载提示并重置标志位wx.hideLoading();}});
}

2.使用标志位控制请求
可以通过设置一个标志位来标记当前是否有请求正在进行,从而防止重复请求。

let isRequesting = false;
function request(url, data, method = 'GET') {if (isRequesting) {console.log('请求正在进行中,请稍后再试');return;}isRequesting = true;wx.request({url: url,data: data,method: method,success(res) {// 处理成功回调console.log('请求成功', res);},fail(err) {// 处理失败回调console.error('请求失败', err);},complete() {// 无论成功或失败,请求完成后重置标志位isRequesting = false;}});
}

3.使用 Promise 封装请求
通过 Promise 封装 wx.request,并在请求前检查是否有未完成的请求。

let pendingRequest = null;
function request(url, data, method = 'GET') {if (pendingRequest) {console.log('请求正在进行中,请稍后再试');return Promise.reject('请求正在进行中');}pendingRequest = new Promise((resolve, reject) => {wx.request({url: url,data: data,method: method,success(res) {resolve(res);},fail(err) {reject(err);},complete() {pendingRequest = null;}});});return pendingRequest;
}

4.使用防抖函数
如果你希望在一定时间内只允许一次请求,可以使用防抖函数来控制请求的频率。

function debounceRequest(url, data, method = 'GET', delay = 1000) {let timer = null;return function() {if (timer) {clearTimeout(timer);}timer = setTimeout(() => {wx.request({url: url,data: data,method: method,success(res) {console.log('请求成功', res);},fail(err) {console.error('请求失败', err);}});}, delay);};
}
// 使用示例
const debouncedRequest = debounceRequest('https://example.com/api', { key: 'value' }, 'GET');
debouncedRequest();

5.使用队列控制请求
如果你希望按顺序处理请求,可以使用队列来控制请求的顺序。

let requestQueue = [];
let isProcessing = false;
function processQueue() {if (isProcessing || requestQueue.length === 0) {return;}isProcessing = true;const { url, data, method, resolve, reject } = requestQueue.shift();wx.request({url: url,data: data,method: method,success(res) {resolve(res);},fail(err) {reject(err);},complete() {isProcessing = false;processQueue();}});
}
function request(url, data, method = 'GET') {return new Promise((resolve, reject) => {requestQueue.push({ url, data, method, resolve, reject });processQueue();});
}

http://www.ppmy.cn/embedded/176676.html

相关文章

Java 大视界 -- 基于 Java 的大数据机器学习模型的多模态融合技术与应用(143)

💖亲爱的朋友们,热烈欢迎来到 青云交的博客!能与诸位在此相逢,我倍感荣幸。在这飞速更迭的时代,我们都渴望一方心灵净土,而 我的博客 正是这样温暖的所在。这里为你呈上趣味与实用兼具的知识,也…

Kafka Snappy 压缩异常分析与解决方案

1. 问题描述 在使用 Kafka 进行消息发送时,遇到了以下异常: org.apache.kafka.common.KafkaException: java.lang.UnsatisfiedLinkError: /tmp/snappy-1.1.7-ee0a2284-1d05-4116-9ddc-a0d5d4b3f8cd-libsnappyjava.so: Error loading shared library ld…

C++类与对象的第一个简单的实战练习-3.24笔记

在哔哩哔哩学习的这个老师的C面向对象高级语言程序设计教程&#xff08;118集全&#xff09;讲的真的很不错 实战一&#xff1a; 情况一&#xff1a;将所有代码写到一个文件main.cpp中 #include<iostream> //不知道包含strcpy的头文件名称是什么,问ai可知 #include<…

智慧路灯机器人是否支持远程监控和管理?

哇哦&#xff01;家人们&#xff0c;叁仟智慧路灯机器人堪称科技领域熠熠生辉的超级巨星&#xff0c;在远程监控与管理方面拥有令人惊叹的卓越表现&#xff01;它全力支持极为便捷的远程监控和管理功能&#xff0c;无论你身处繁华都市的写字楼&#xff0c;还是远在宁静乡村的田…

SpringMVC 配置详解

SpringMVC 是 Spring 框架中用于构建 Web 应用程序的模块&#xff0c;它基于 MVC&#xff08;Model-View-Controller&#xff09;设计模式&#xff0c;能够将业务逻辑、数据和显示分离&#xff0c;从而提高代码的可维护性和可扩展性。本文将详细介绍 SpringMVC 的配置步骤和相关…

基础算法02——冒泡排序(Bubble Sort)

冒泡排序&#xff08;Bubble Sort&#xff09; 冒泡排序&#xff1a;是一种简单的排序算法&#xff0c;其基本思想是通过重复遍历要排序的列表&#xff0c;比较相邻的元素&#xff0c;并在必要时&#xff08;即前面的数比后面的数大的时候&#xff09;交换它们的位置&#xff…

tcpdump-快速查询版-常用后缀

文章目录 1. 安装Tcpdump2. Tcpdump命令语法3. 捕获特定接口的数据包 -i4. 预设捕获数据包数量 -c5. 获取详细输出 -v6. 以ASCII格式打印捕获的数据 -A7. 捕获特定源IP的数据包 src8. 捕获发往特定目标IP的数据包 dst9. 根据端口号过滤 port10. 根据协议过滤 proto11. 根据主机…

两个常用的用于读写和操作DXF文件C#库:netDxf 和 DXF.NET

netDxf 和 DXF.NET 是两个常用的C#库&#xff0c;用于读取、写入和操作DXF文件。以下是它们的详细介绍和用法示例。 1. netDxf 简介 netDxf 是一个开源的DXF文件读写库&#xff0c;支持AutoCAD DXF格式的读取和写入。它支持大多数DXF实体和对象&#xff0c;并且易于使用。 Gi…