在 Vue 项目中使用 Axios 进行 API 请求时，如果需要在离开页面时取消未完成的请求，可以使用 Axios 的 CancelToken 功能。以下是一个示例，演示如何在 Vue 组件中实现这一功能。
首先，确保你已经安装了 Axios：
接下来，按照以下步骤在你的 Vue 组件中使用
接下来，按照以下步骤在你的 Vue 组件中使用 CancelToken：
在组件中创建一个 CancelToken 实例。
在 beforeDestroy 或 beforeRouteLeave 钩子中取消请求。
<template>
<div>
<!-- Your component template -->
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
cancelTokenSource: null
};
},
created() {
// 创建CancelToken实例
this.cancelTokenSource = axios.CancelToken.source();
},
methods: {
fetchData() {
axios.get('https://api.example.com/data', {
cancelToken: this.cancelTokenSource.token
})
.then(response => {
console.log('Data:', response.data);
})
.catch(error => {
if (axios.isCancel(error)) {
console.log('Request canceled:', error.message);
} else {
console.error('Error:', error);
}
});
}
},
beforeDestroy() {
// 在组件销毁之前取消请求
if (this.cancelTokenSource) {
this.cancelTokenSource.cancel('Component is being destroyed.');
}
},
beforeRouteLeave(to, from, next) {
// 在离开路由之前取消请求
if (this.cancelTokenSource) {
this.cancelTokenSource.cancel('Route is changing.');
}
next();
}
};
</script>在这个示例中，我们在 created 钩子中创建了一个 CancelToken 实例，并在 beforeDestroy 和 beforeRouteLeave 钩子中取消请求。这样，当组件销毁或路由发生变化时，未完成的请求将被取消。
如果你使用的是 Vue 3，可以使用 onBeforeUnmount 组合式 API 来实现相同的功能：
<template>
<div>
<!-- Your component template -->
</div>
</template>
<script>
import axios from 'axios';
import { ref, onBeforeUnmount } from 'vue';
import { useRouter } from 'vue-router';
export default {
setup() {
const cancelTokenSource = ref(null);
const router = useRouter();
// 创建CancelToken实例
cancelTokenSource.value = axios.CancelToken.source();
const fetchData = () => {
axios.get('https://api.example.com/data', {
cancelToken: cancelTokenSource.value.token
})
.then(response => {
console.log('Data:', response.data);
})
.catch(error => {
if (axios.isCancel(error)) {
console.log('Request canceled:', error.message);
} else {
console.error('Error:', error);
}
});
};
// 在组件销毁之前取消请求
onBeforeUnmount(() => {
if (cancelTokenSource.value) {
cancelTokenSource.value.cancel('Component is being destroyed.');
}
});
// 在离开路由之前取消请求
router.beforeEach((to, from, next) => {
if (cancelTokenSource.value) {
cancelTokenSource.value.cancel('Route is changing.');
}
next();
});
return {
fetchData
};
}
};
</script>在这个示例中，我们做了以下事情：
使用 ref 创建一个可响应的 cancelTokenSource 变量来存储 CancelToken 实例。
在 setup 函数中创建 CancelToken 实例。
使用 axios.get 发送请求，并将 cancelToken 添加到请求配置中。
使用 onBeforeUnmount 钩子，在组件卸载之前取消未完成的请求。
使用 router.beforeEach 钩子，在路由变化之前取消未完成的请求。
通过这种方式，你可以确保在 Vue 3 组件销毁或路由变化时取消未完成的 Axios 请求，避免不必要的资源消耗和潜在的问题。