How to cancel/abort ajax request in axios

在axios中取消或中止一个Ajax请求，可以使用Axios提供的CancelToken。CancelToken可以让你主动取消Ajax请求。以下是使用CancelToken的步骤及例子：

使用 CancelToken 步骤：

1. 创建 cancel token： 使用axios.CancelToken工厂函数创建一个取消token。

2. 传递 cancel token 到请求配置： 在发起请求时，将这个cancel token作为请求配置的参数传递给axios。

3. 取消请求： 使用创建token时得到的取消函数（cancel）来取消请求。

示例代码：

javascript
import axios from 'axios';

// 第1步：创建cancel token
const CancelToken = axios.CancelToken;
let cancel;

// 第2步：发起请求，并传递cancel token
axios.get('/some/path', {
  cancelToken: new CancelToken(function executor(c) {
    // 这个executor函数接收一个取消函数作为参数
    cancel = c;
  })
})
.then(response => {
  // 处理响应
})
.catch(error => {
  // 处理错误
  if (axios.isCancel(error)) {
    console.log('请求被取消:', error.message);
  } else {
    // 处理其他错误
  }
});

// 第3步：取消请求
// 当需要取消请求时，调用cancel函数
cancel('Operation canceled by the user.');

在这个例子中，我们创建了一个cancel token，并在发起请求时将它传递给了axios.get。当我们执行cancel函数时，如果请求还没有完成，它将会被取消，catch代码块会捕获到一个axios.Cancel类型的错误。

另一种方式：使用 CancelToken.source 工厂方法

另一种创建cancel token的方式是使用CancelToken.source方法：

javascript
import axios from 'axios';

// 创建cancel token source
const source = axios.CancelToken.source();

// 发起请求，并传递cancel token
axios.get('/some/path', {
  cancelToken: source.token
})
.then(response => {
  // 处理响应
})
.catch(error => {
  // 处理错误
  if (axios.isCancel(error)) {
    console.log('Request canceled:', error.message);
  }
});

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

在这个例子中，我们使用CancelToken.source创建了一个对象，它包含了一个token用于请求配置，以及一个cancel方法用于取消请求。这种方法更为简洁且易于理解。

注意：

• 取消请求是一种不常见的操作，通常用在即将离开页面或者组件卸载时取消未完成的请求，以避免不必要的资源浪费。
• 在取消请求后，Axios会抛出一个错误。你需要在catch代码块中通过axios.isCancel函数来判断这个错误是否为一个取消请求的错误，以便正确处理。