巧用axios解决误触导致的多次请求发送问题

前端

2023-12-19 23:41:50

避免移动端误触重复请求的利器：Axios CancelToken

在移动端开发中，用户误触导致的重复请求问题是一个不容忽视的挑战。它不仅会影响用户体验，更会对服务器造成压力，甚至引发系统崩溃。

误触重复请求的危害

当用户在网络环境不稳定或设备性能较差的情况下，误触按钮或链接时，可能会触发多次重复的请求。这些请求会给服务器带来额外的负担，导致响应时间延长甚至崩溃。

Axios CancelToken 的作用

Axios CancelToken 是一种机制，允许我们在请求发送前或发送后取消请求。它提供了一种有效的手段来防止误触造成的重复请求。

如何使用 Axios CancelToken

使用 Axios CancelToken 非常简单，只需几个步骤：

创建 CancelToken 实例 ：使用 axios.CancelToken.source() 创建一个 CancelToken 实例。它返回一个包含两个属性的对象：cancelToken 和 cancel。
传递 CancelToken ：将 cancelToken 作为参数传递给 Axios 的请求方法，如 get 或 post。这将确保 Axios 在发送请求前检查 cancelToken 是否被取消。
取消请求 ：如果需要在请求发送后取消请求，可以调用 cancel 函数。这将导致 Axios 取消请求，并抛出一个 axios.Cancel 错误。

代码示例

以下代码演示了如何使用 Axios CancelToken 防止误触造成的重复请求：

// 创建 CancelToken 实例
const cancelToken = axios.CancelToken.source();

// 传递 CancelToken
axios({
  method: 'get',
  url: 'https://example.com/api/v1/users',
  cancelToken: cancelToken.token,
})
  .then((response) => {
    // 请求成功
    console.log(response.data);
  })
  .catch((error) => {
    // 请求失败
    if (axios.isCancel(error)) {
      console.log('请求已取消');
    } else {
      console.log('请求失败', error);
    }
  });

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