React Axios妙用：封装防重复提交，一劳永逸解决重复请求难题

2022-12-22 18:36:20

React Axios 封装之旅：轻松实现防重复提交

背景

在前端开发中，重复提交请求是一个常见问题。当用户重复点击按钮或快速发送请求时，可能会导致服务端负荷过高，甚至出现错误。为了避免这种问题，我们可以使用 Axios 来封装请求，并实现防重复提交功能。

Axios 封装步骤

步骤 1：安装 Axios

npm install axios

步骤 2：创建 Axios 实例

const axiosInstance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000,
});

步骤 3：封装请求函数

const makeRequest = (config) => {
  return axiosInstance(config)
    .then((response) => response.data)
    .catch((error) => {
      if (error.response) {
        // 处理请求失败的情况
      } else if (error.request) {
        // 处理请求未发送的情况
      } else {
        // 处理其他情况
      }
      return Promise.reject(error);
    });
};

防重复提交实现

步骤 4：添加防重复提交功能

let isSubmitting = false;
const makeRequestWithPreventRepeat = (config) => {
  if (isSubmitting) {
    return Promise.reject(new Error('请求正在提交中，请稍后再试'));
  }
  isSubmitting = true;
  return makeRequest(config).finally(() => {
    isSubmitting = false;
  });
};

步骤 5：使用封装后的函数发送请求

makeRequestWithPreventRepeat({
  url: '/users',
  method: 'GET',
})
.then((data) => {
  // 处理请求成功的情况
})
.catch((error) => {
  // 处理请求失败的情况
});

步骤 6：实现 2 秒内禁止重复提交

const makeRequestWithPreventRepeatFor2Seconds = (config) => {
  let timeoutId;
  return new Promise((resolve, reject) => {
    timeoutId = setTimeout(() => {
      isSubmitting = false;
      reject(new Error('请求超時，請稍後再試'));
    }, 2000);
    makeRequestWithPreventRepeat(config)
      .then((data) => {
        clearTimeout(timeoutId);
        resolve(data);
      })
      .catch((error) => {
        clearTimeout(timeoutId);
        reject(error);
      });
  });
};