告别请求等待，揭秘 Axios 取消请求的两种方法

前端

2023-09-28 00:13:18

取消 Axios 请求：避免浪费资源，优化用户体验

前言

在前端开发中，网络请求无处不在。但是，有时由于网络延迟、用户操作或其他因素，您可能需要在发送请求后取消它。本文将深入探讨使用 Axios 库取消请求的必要性和两种方法，并提供具体的应用场景和示例代码。

取消请求的必要性

在前端开发中，取消请求有以下好处：

避免浪费资源： 如果请求不再需要，取消它可以释放系统资源，如内存和带宽。
优化用户体验： 如果用户在请求完成前离开了页面或执行了其他操作，取消请求可以避免不必要的等待和加载时间。
控制并发请求： 当发出多个并发请求时，取消不需要的请求可以节省资源，并防止服务器过载。

取消 Axios 请求的两种方法

Axios 提供了两种方法来取消请求：

1. 使用 abort() 方法

axios.get('https://example.com/api/users', {
  cancelToken: new axios.CancelToken(function executor(c) {
    // 在需要取消请求时调用 c() 函数
  })
});

2. 使用 Axios 内置的取消令牌

const controller = new AbortController();
const signal = controller.signal;

axios.get('https://example.com/api/users', {
  signal
});

// 取消请求
controller.abort();

应用场景

以下是一些使用 Axios 取消请求的常见场景：

用户操作取消请求： 当用户在请求完成前离开页面或执行其他操作时，可以使用取消请求功能来防止浪费资源和影响用户体验。
请求超时处理： 当后端服务器处理请求超时时，可以使用取消请求功能来及时终止请求，以节省资源和避免用户长时间等待。
并发请求控制： 当有多个并发请求同时发送时，可以使用取消请求功能来保留其中一个请求的结果，从而避免浪费资源和影响用户体验。

示例代码

使用 abort() 方法：

const cancelTokenSource = axios.CancelToken.source();

axios({
  url: 'https://example.com/api/v1/users',
  cancelToken: cancelTokenSource.token
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (axios.isCancel(error)) {
      console.log('Request canceled');
    } else {
      console.log('Request failed', error);
    }
  });

cancelTokenSource.cancel('Operation canceled by the user.');

使用 Axios 内置的取消令牌：

const controller = new AbortController();
const signal = controller.signal;

axios({
  url: 'https://example.com/api/v1/users',
  signal
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('Request canceled');
    } else {
      console.log('Request failed', error);
    }
  });

controller.abort();