Axios 中止请求

在使用 Axios 进行接口请求的过程中，有时我们需要中止一个请求，比如用户在进行搜索操作时，快速改变了搜索关键词，此时之前的搜索请求就没有必要继续了，我们需要中止之前的请求，以防止接口返回结果后导致界面出现异常。

在 Axios 中，可以通过 CancelToken 和 axios.CancelToken.source() 这两个 API 来实现请求的中止操作。

使用 CancelToken 中止请求

首先，我们需要创建一个 CancelToken 并将其作为参数传递到请求配置中：

import axios from 'axios';

const cancelTokenSource = axios.CancelToken.source();

axios.get('/api/get-data', {
  cancelToken: cancelTokenSource.token
}).then(response => {
  console.log(response.data);
}).catch(error => {
  console.log(error.message);
});

接着，我们可以通过调用 cancel() 方法来中止请求：

cancelTokenSource.cancel('Request has been canceled');

当调用 cancel() 方法后，会将请求标记为已取消，之后再接收到响应结果时，catch() 方法会捕获到一个包含 'canceled' 属性的 Error 对象，我们可以通过判断响应的 Error 对象是否包含 'canceled' 属性来判断这次请求是否被取消了。

axios.get('/api/get-data', {
  cancelToken: cancelTokenSource.token
}).then(response => {
  console.log(response.data);
}).catch(error => {
  if (axios.isCancel(error)) {
    console.log('Request canceled:', error.message);
  } else {
    console.log('An error occurred:', error.message);
  }
});

使用 axios.CancelToken.source() 中止请求

另一种更简洁的方法是，我们可以直接通过 axios.CancelToken.source() 方法来创建一个 CancelToken，并将其传递到请求配置中：

const { token, cancel } = axios.CancelToken.source();

axios.get('/api/get-data', {
  cancelToken: token
}).then(response => {
  console.log(response.data);
}).catch(error => {
  if (axios.isCancel(error)) {
    console.log('Request canceled:', error.message);
  } else {
    console.log('An error occurred:', error.message);
  }
});

cancel('Request has been canceled');

这样，我们就可以通过 cancel() 方法来中止请求了。

总结

使用 CancelToken 和 axios.CancelToken.source() 这两个 API 可以很方便地实现请求的中止操作，这对于有些交互较为频繁的页面来说，可以有效地提高系统响应速度和用户体验。