Axios 阻止重复请求的艺术：前端实战指南

前端

2023-11-10 14:40:49

当今快节奏的 Web 世界中，用户交互必须迅速且无缝。重复请求可能会导致不必要的延迟和服务器负载，影响整体用户体验。作为前端开发人员，我们有责任实施机制来防止重复请求，从而确保最佳性能。

本文将深入探讨利用 Axios 来处理重复请求的艺术。我们将了解 Axios 的工作原理，并探索多种前端策略来防止重复请求，同时保持代码的优雅和效率。

了解 Axios

Axios 是一个轻量级且功能强大的 Promise 驱动的 HTTP 客户端库，广泛用于前端开发。它简化了与后端服务器进行 HTTP 请求，并提供许多有用的特性。

Axios 的工作原理：

创建一个 Axios 实例。
使用 request() 方法发送请求。
接收一个 Promise 对象，该对象解析为响应数据或拒绝为错误。

防止重复请求的策略

1. 使用布尔标志：

let isRequestInProgress = false;

const makeRequest = () => {
  if (!isRequestInProgress) {
    isRequestInProgress = true;
    axios.get('/api/data')
      .then(res => {
        // 处理响应
        isRequestInProgress = false;
      })
      .catch(err => {
        // 处理错误
        isRequestInProgress = false;
      });
  }
};

2. 利用 Axios 取消令牌：

const source = axios.CancelToken.source();

const makeRequest = () => {
  axios.get('/api/data', { cancelToken: source.token })
    .then(res => {
      // 处理响应
    })
    .catch(err => {
      if (axios.isCancel(err)) {
        // 请求已取消
      } else {
        // 处理错误
      }
    });

  // 取消请求
  source.cancel('Operation cancelled');
};

3. 缓存 Axios 请求：

const cache = {};

const makeRequest = (url) => {
  if (cache[url]) {
    return Promise.resolve(cache[url]);
  }

  return axios.get(url)
    .then(res => {
      cache[url] = res.data;
      return res.data;
    })
    .catch(err => {
      // 处理错误
    });
};

4. 使用节流函数：

const throttle = (func, wait) => {
  let lastCall = 0;

  return (...args) => {
    const now = new Date().getTime();
    if (now - lastCall < wait) {
      return;
    }

    lastCall = now;
    return func(...args);
  };
};

const makeRequest = throttle(() => {
  axios.get('/api/data')
    .then(res => {
      // 处理响应
    })
    .catch(err => {
      // 处理错误
    });
}, 1000); // 限制为每秒 1 次请求