axios 可以通过创建一个 CancelToken 来取消一个请求,基本原理是:
- 创建一个 CancelToken 的实例,它有一个 executor 函数,可以通过调用 executor 参数中的 cancel 函数来取消请求。
- 在 axios 请求配置中指定 cancelToken 属性,将 CancelToken 实例传递进去。
- 当我们需要取消请求时,调用 CancelToken 实例的 cancel() 方法即可取消对应的请求。
- axios 检测到配置的 cancelToken 被取消,就会取消掉这个请求,并在错误回调中返回一个 Cancel 错误。
axios 内部会监听 cancelToken 实例的 cancel 信号,一旦触发就会跳出队列,取消对应请求的执行。
示例代码:
js
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
axios.get('/user', {
cancelToken: source.token
}).catch(function(thrown) {
if(axios.isCancel(thrown)) {
console.log('Request canceled', thrown.message);
} else {
// 处理错误
}
});
// 取消请求
source.cancel('Operation canceled by the user.');
vue、React项目中如何取消
在基于 React 或 Vue 的应用中，可以通过封装 Axios 并结合组件的状态管理来实现取消请求的功能。下面分别介绍在 React 和 Vue 中如何实现这一点。
在 React 中的实现：
- 创建一个封装的 Axios 实例，以便于应用中的多个组件共享相同的配置和取消令牌。
// axiosInstance.js
import axios from 'axios';
const instance = axios.create();
export default instance;
- 在组件中使用这个封装的 Axios 实例，并结合组件的状态管理来处理取消请求的逻辑。
// YourComponent.js
import React, {
useState } from 'react';
import axiosInstance from './axiosInstance';
function YourComponent() {
const [loading, setLoading] = useState(false);
const [data, setData] = useState(null);
const source = axiosInstance.CancelToken.source();
const fetchData = async () => {
try {
setLoading(true);
const response = await axiosInstance.get('/api/some-endpoint', {
cancelToken: source.token
});
setData(response.data);
setLoading(false);
} catch (error) {
if (axiosInstance.isCancel(error)) {
console.log('请求被取消：', error.message);
} else {
// 处理其他错误
}
setLoading(false);
}
};
const cancelRequest = () => {
source.cancel('请求被用户取消');
};
return (
<div>
{
loading ? <p>Loading...</p> : <p>{
data}</p>}
<button onClick={
fetchData}>Fetch Data</button>
<button onClick={
cancelRequest}>取消请求</button>
</div>
);
}
export default YourComponent;
在 Vue 中的实现：
- 创建一个封装的 Axios 实例，同样可以让多个组件共享相同的配置和取消令牌。
// axiosInstance.js
import axios from 'axios';
const instance = axios.create();
export default instance;
- 在组件中使用这个封装的 Axios 实例，并结合组件的状态管理来处理取消请求的逻辑。
<template>
<div>
<p v-if="loading">Loading...</p>
<p v-else>{
{
data }}</p>
<button @click="fetchData">Fetch Data</button>
<button @click="cancelRequest">取消请求</button>
</div>
</template>
<script>
import axiosInstance from './axiosInstance';
export default {
data() {
return {
loading: false,
data: null,
source: axiosInstance.CancelToken.source()
};
},
methods: {
async fetchData() {
try {
this.loading = true;
const response = await axiosInstance.get('/api/some-endpoint', {
cancelToken: this.source.token
});
this.data = response.data;
this.loading = false;
} catch (error) {
if (axiosInstance.isCancel(error)) {
console.log('请求被取消：', error.message);
} else {
// 处理其他错误
}
this.loading = false;
}
},
cancelRequest() {
this.source.cancel('请求被用户取消');
}
}
};
</script>
原理
Axios 取消请求的原理是基于底层网络请求库（如 XMLHttpRequest 或 Fetch）提供的中止机制。当调用取消令牌的 cancel 方法时，Axios 会触发中止底层的网络请求，从而终止正在进行的请求过程。
具体来说，以下是 Axios 取消请求的原理：
-
创建 CancelToken 对象： 在发起请求之前，可以通过
axios.CancelToken.source()方法创建一个 CancelToken 对象，并获取其中的token。这个token是一个用于标识该请求的令牌。 -
关联 CancelToken： 将创建的 CancelToken 对象中的
token关联到请求的配置中，通过cancelToken参数。这告诉 Axios 在取消令牌触发时要取消这个请求。 -
取消请求： 当想要取消请求时，调用 CancelToken 对象中的
cancel方法，并提供一个取消的原因。这会触发 Axios 内部的逻辑，导致底层的网络请求被中止。 -
捕获取消错误： 如果请求在取消前已经发出，Axios 会抛出一个名为
Cancel的错误。可以使用axios.isCancel(error)来检查是否是取消错误。在.catch部分处理这个取消错误。
底层 XMLHttpRequest 和 Fetch API 都提供了终止请求的机制。当取消请求时，Axios 会调用底层网络请求的相应中止方法，例如 xhr.abort() 或 fetch.abort()，从而使网络请求停止并抛出取消错误。这个机制允许有效地取消正在进行的请求，避免不必要的数据传输和处理。