防重复请求方法总结 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();
  });
}