避免重复请求的秘密武器：Axios 拦截器

2023-10-23 22:13:51

引言

在前端开发中，我们经常需要处理异步请求，如获取数据或提交表单。Axios是一个流行的JavaScript库，它可以帮助我们轻松地处理这些请求。然而，有时候我们会遇到重复请求的问题，即同一个请求被发送了多次。这可能会导致服务器端的错误或浪费资源。

为了避免重复请求，我们可以使用Axios拦截器来配置重复请求取消。Axios拦截器允许我们在请求发送前或响应返回后对请求进行一些操作。我们可以利用拦截器来检查请求是否已经被发送过，如果是，则取消该请求。

官方示例

Axios官方文档提供了两个示例，展示了如何使用拦截器来配置重复请求取消。

示例1：使用CancelToken.source工厂方法创建cancel token

const cancelToken = axios.CancelToken.source();

axios.get('/endpoint', {
  cancelToken: cancelToken.token
})
.then(response => {
  // 请求成功
})
.catch(error => {
  if (axios.isCancel(error)) {
    // 请求被取消
  } else {
    // 请求失败
  }
});

// 取消请求
cancelToken.cancel();

在这个示例中，我们使用CancelToken.source工厂方法创建了一个cancel token。然后，我们将这个cancel token传递给axios.get()方法。当我们调用cancelToken.cancel()方法时，请求将被取消。

示例2：通过传递一个executor函数到CancelToken的构造函数来创建cancel token

const cancelToken = new axios.CancelToken(function executor(c) {
  // 在这个函数中，你可以注册一些事件监听器来取消请求
  window.addEventListener('beforeunload', () => {
    c(); // 取消请求
  });
});

axios.get('/endpoint', {
  cancelToken: cancelToken
})
.then(response => {
  // 请求成功
})
.catch(error => {
  if (axios.isCancel(error)) {
    // 请求被取消
  } else {
    // 请求失败
  }
});

在这个示例中，我们通过传递一个executor函数到CancelToken的构造函数来创建了一个cancel token。executor函数中，我们可以注册一些事件监听器来取消请求。例如，当用户关闭浏览器窗口时，我们可以调用cancel()方法来取消请求。

实例代码

以下是一个使用Axios拦截器来配置重复请求取消的实例代码：

axios.interceptors.request.use(config => {
  if (config.url in pendingRequests) {
    // 请求已经发送过，取消该请求
    pendingRequests[config.url].cancel();
  } else {
    // 请求尚未发送，将请求添加到pendingRequests对象中
    pendingRequests[config.url] = axios.CancelToken.source();
    config.cancelToken = pendingRequests[config.url].token;
  }

  return config;
}, error => {
  // 请求发送失败
});

axios.interceptors.response.use(response => {
  // 请求成功，从pendingRequests对象中删除该请求
  delete pendingRequests[response.config.url];

  return response;
}, error => {
  // 请求失败，从pendingRequests对象中删除该请求
  delete pendingRequests[error.config.url];

  return Promise.reject(error);
});