「前端杂谈」浏览器自动取消重复请求：打造坚固网络请求卫士！

2024-01-25 13:54:37

重复请求，这听起来像是网络开发中的小麻烦，但如果没有处理好，却可能酿成大灾难。想想看，当用户点击某个按钮时，由于网络延迟或其他原因，导致请求没有立即得到响应，用户又焦急地多次点击，结果导致相同的请求被多次发送到服务器，造成数据错乱。这不仅让用户体验不佳，甚至可能给你的网站或应用程序带来严重后果。

但别担心，解决这个问题其实很简单。借助 axios 库中强大的 cancelToken 机制，你可以轻松实现对重复请求的取消。只需几行代码，就能让你的网络请求更加健壮可靠。

axios 的 cancelToken 机制

cancelToken 是 axios 提供的一个非常实用的功能，它允许你在请求发送前或发送后取消请求。这对于处理重复请求非常有用。要使用 cancelToken，你需要创建一个 cancelToken 实例，然后将它作为第二个参数传递给 axios 的请求方法。

const cancelToken = axios.CancelToken.source();

axios({
  url: 'https://example.com/api/v1/users',
  cancelToken: cancelToken.token
}).then(response => {
  // 请求成功时执行的代码
}).catch(error => {
  // 请求失败时执行的代码
});

如果需要取消请求，只需调用 cancelToken 的 cancel() 方法即可。

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

取消重复请求

在前端开发中，最常见的重复请求场景就是按钮点击。当用户快速连续地点击按钮时，很容易导致相同的请求被多次发送。为了防止这种情况发生，我们可以使用 cancelToken 来取消重复请求。

const button = document.querySelector('button');

button.addEventListener('click', () => {
  const cancelToken = axios.CancelToken.source();

  axios({
    url: 'https://example.com/api/v1/users',
    cancelToken: cancelToken.token
  }).then(response => {
    // 请求成功时执行的代码
  }).catch(error => {
    if (axios.isCancel(error)) {
      // 请求被取消时执行的代码
    } else {
      // 请求失败时执行的代码
    }
  });

  // 在请求发送后，取消请求
  cancelToken.cancel('取消请求');
});

在上面的代码中，我们在按钮的点击事件处理程序中创建了一个 cancelToken 实例，并将它作为第二个参数传递给 axios 的请求方法。当用户点击按钮时，请求会被发送。但在请求发送后，我们立即调用 cancelToken 的 cancel() 方法取消请求。这样，即使用户多次点击按钮，也只会发送一次请求。