axios 终止
在进行网络请求时，我们经常会用到axios这个强大的库。它是一个基于Promise的HTTP客户端，可以在浏览器和Node.js中使用。使用axios可以轻松地发送异步HTTP请求，并且具有灵活的配置选项和丰富的功能。
然而，在某些情况下，我们可能需要中止一个正在进行的HTTP请求。比如，用户在请求正在进行时，点击了取消按钮，我们需要中止这个请求。axios提供了一种简单的方式来中止请求，以避免不必要的网络请求和资源浪费。
使用axios取消请求
要使用axios取消请求，需要先创建一个CancelToken实例，然后将其传递给axios的cancelToken选项。CancelToken是axios中的一个类，用于创建一个可以取消请求的对象。
下面是一个简单的示例代码：
// 创建一个CancelToken实例
const source = axios.CancelToken.source();
// 发送请求
axios.get('/api/data', {
cancelToken: source.token
}).then(response => {
console.log(response.data);
}).catch(error => {
if (axios.isCancel(error)) {
console.log('请求被取消', error.message);
} else {
console.log('请求失败', error.message);
}
});
// 取消请求
source.cancel('用户取消了请求');
在上面的代码中，我们先创建了一个CancelToken实例source，然后将其传递给axios的cancelToken选项。发送请求后，如果请求被取消，可以通过捕获axios的isCancel错误来处理取消请求的情况。
取消多个请求
在实际开发中，我们可能会有多个请求同时发送，需要能够取消其中的某一个或多个请求。axios允许我们通过创建多个CancelToken实例来实现这个需求。
下面是一个取消多个请求的示例代码：
// 创建多个CancelToken实例
const source1 = axios.CancelToken.source();
const source2 = axios.CancelToken.source();
// 发送请求
axios.get('/api/data1', {
cancelToken: source1.token
}).then(response => {
console.log(response.data);
}).catch(error => {
if (axios.isCancel(error)) {
console.log('请求1被取消');
} else {
console.log('请求1失败', error.message);
}
});
axios.get('/api/data2', {
cancelToken: source2.token
}).then(response => {
console.log(response.data);
}).catch(error => {
if (axios.isCancel(error)) {
console.log('请求2被取消');
} else {
console.log('请求2失败', error.message);
}
});
// 取消请求1
source1.cancel('用户取消了请求1');
在上面的代码中，我们创建了两个CancelToken实例source1和source2，并将它们分别传递给两个请求。当我们取消请求1时，只有请求1会被取消，请求2仍然会继续进行。
取消请求的应用场景
取消请求在实际开发中是非常有用的，特别是在以下情况下：
- 用户在请求进行时，点击了取消按钮。
- 用户离开了当前页面，不再需要该请求的结果。
- 请求超时，需要中止未完成的请求。
通过取消不必要的请求，可以减少网络请求的次数，提高应用的性能和用户体验。
类图
下面是axios中与取消请求相关的类的类图：
classDiagram
class CancelToken {
+source: CancelTokenSource
+token: CancelTokenSource
+reason: CancelReason
+throwIfRequested(): void
}
class CancelTokenSource {
+token: CancelToken
+cancel: Canceler
+reason: CancelReason
+cancel(message: string): void
}
class CancelReason {
+message: string
}
在上面的类图中，CancelToken是一个可取消的令牌类，可以用于取消请求。CancelTokenSource是CancelToken的一个实例，用于生成取消令牌和取消请求。CancelReason是取消请求的原因类，用于存储取消请求的消息。
序列图
下面是一个简单的取消请求的序列图：
sequenceDiagram
participant User
participant App
participant Axios
participant Server
User->>App: 点击取消按钮
App->>Axios: 调用cancel方法
