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

在微信小程序中，为了防止 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();
    });
}