网络请求界的黑马：取消axios的烦恼

2023-09-05 12:37:56

取消 axios 请求：保证数据时效性的必备技能

在我们的日常开发工作中，经常会遇到这样的需求：我们需要多次请求同一个接口，但每次请求都需要取消上一次请求，以保证数据的时效性。使用 axios 库时，我们如何优雅地实现这一需求？

1. 利用 axios 的 cancelToken

axios 提供了强大的 cancelToken 机制，它允许我们方便地取消请求。cancelToken 是一个可取消的对象，当调用其 cancel 方法时，与之关联的请求就会被终止。

// 创建一个 cancelToken
const cancelToken = axios.CancelToken;
const source = cancelToken.source();

// 使用 cancelToken 发起请求
axios({
  url: '/api/users',
  cancelToken: source.token
})
  .then((response) => {
    // 请求成功
  })
  .catch((error) => {
    if (axios.isCancel(error)) {
      // 请求被取消
    } else {
      // 请求失败
    }
  });

// 取消请求
source.cancel('Operation canceled by the user.');

2. 直接调用 abort 方法

对于 XMLHttpRequest 对象，我们可以直接调用 abort 方法来取消请求。此方法会立即终止请求，无需等待其完成。

// 创建一个 XMLHttpRequest 对象
const xhr = new XMLHttpRequest();

// 发起请求
xhr.open('GET', '/api/users');
xhr.send();

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

3. 借助 fetch 的 AbortController

fetch API 也提供了 AbortController，它类似于 cancelToken，但主要用于 fetch 请求。AbortController 也是一个可取消的对象，当调用其 abort 方法时，与其关联的 fetch 请求就会被终止。

// 创建一个 AbortController
const controller = new AbortController();
const signal = controller.signal;

// 使用 AbortController 发起 fetch 请求
fetch('/api/users', {
  signal: signal
})
  .then((response) => {
    // 请求成功
  })
  .catch((error) => {
    if (error.name === 'AbortError') {
      // 请求被取消
    } else {
      // 请求失败
    }
  });

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