Axios是一款非常流行的基于Promise的HTTP客户端，它可以用于浏览器和Node.js平台。在实际开发中，我们可能会遇到一些场景需要中断正在进行的请求，比如用户取消了操作或者当前页面已经被关闭。本文将详细介绍Axios中中断请求的方法和实现方式。
一、使用CancelToken中断请求
Axios中提供了CancelToken类，可以用来取消请求。CancelToken是用来取消请求的一个信号，在请求还没有完成的时候发出该信号就可以中断请求。要使用CancelToken中断请求，我们需要做以下几个步骤： 1. 首先创建一个CancelToken对象，可以通过下面的代码创建：
const { CancelToken } = axios;
const source = CancelToken.source();
2. 在发送请求的时候，将前面创建的CancelToken对象传递给axios实例的config参数中，例如：
axios.get('/api/user', {
cancelToken: source.token
})
3. 当需要中断请求时，可以调用source.cancel()方法发出取消的信号即可，例如：
source.cancel('请求被取消了！');
这里需要注意的是，在取消请求之后，当前的请求会被取消并且会抛出一个Cancel对象，错误信息中包含了被取消请求的原因。
二、使用AxiosInterceptorManager中断请求
另外一种中断请求的方式是使用AxiosInterceptorManager中的eject方法来中断请求。AxiosInterceptorManager是一个拦截器管理器，在Axios中，拦截器被分为两种，一种是请求拦截器，另一种是响应拦截器。请求拦截器在请求被发送之前执行，响应拦截器在响应被处理之前执行。我们可以通过AxiosInterceptorManager中的eject方法来中断请求。具体实现步骤如下： 1. 在发送请求的时候，将前面创建的config参数对象保存起来，例如：
axios.interceptors.request.use(config => {
config.source = axios.CancelToken.source();
return config;
}, error => {
return Promise.reject(error);
});
这里使用了axios.interceptors.request.use()方法向请求拦截器队列中添加了一个拦截器，这个拦截器会在请求被发送前执行。在这个拦截器中，我们对config参数对象进行了修改，添加了一个source属性，用于保存CancelToken对象。 2. 当需要中断请求时，可以调用axios.interceptors.request.eject()方法来中断请求，例如：
axios.interceptors.request.eject(config.interceptorId);
这里需要注意的是，通过eject方法中断请求只能在请求拦截器中使用，如果需要在响应拦截器中中断请求，则需要使用第一种方法。
三、结合Promise.race()函数中断请求
除了上面两种方式，还可以通过Promise.race()函数来中断请求。这种方式可以同时处理多个请求，只有当其中一个请求被中断时，其余的请求也都会被中断。 具体实现步骤如下： 1. 首先创建一个包含多个请求的Promise数组，例如：
const request1 = axios.get('/api/user?name=John');
const request2 = axios.get('/api/profile?id=123');
const request3 = axios.get('/api/post?title=JavaScript');
const request4 = axios.get('/api/comment?postId=123456');
const requests = [request1, request2, request3, request4];
2. 使用Promise.race()函数将多个请求进行封装，例如：
Promise.race(requests).then(response => {
console.log(response);
}).catch(error => {
console.log(error);
});
3. 当需要中断请求时，调用Promise.race()函数返回的Promise对象的then方法，并将一个Canceled对象作为参数传递给它即可，例如：
requests.forEach(request => {
request.then(response => {
console.log(response);
}).catch(error => {
if (axios.isCancel(error)) {
console.log(error.message);
} else {
console.log(error);
}
});
});
setTimeout(() => {
const cancelToken = axios.CancelToken;
requests.forEach(request => {
request.cancelToken = new cancelToken(c => {
request.cancel = c;
});
});
requests[0].cancel('请求被取消了！');
}, 2000);
在上面的代码中，我们首先使用forEach方法遍历requests数组，为每个请求添加一个cancelToken，然后将cancel方法保存起来。之后，通过调用setTimeout函数来模拟中断请求的情景，在2秒钟后调用request[0].cancel()方法来中断第一个请求。
四、总结
以上三种方式都可以用来中断Axios中正在进行的请求，根据实际场景的不同，我们可以选择合适的方法来解决问题。通过本文的学习，相信大家都已经掌握了中断请求的方法和实现方式。
