import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';
let cancelSources = [];
// 创建一个 axios 实例
const instance = axios.create();
// 添加请求拦截器
instance.interceptors.request.use(config => {
// 为每个请求创建一个新的取消源
const source = axios.CancelToken.source();
cancelSources.push(source);
config.cancelToken = source.token;
return config;
}, error => {
return Promise.reject(error);
});
// 添加响应拦截器
instance.interceptors.response.use(response => {
return response;
}, error => {
// 检查是否是 token 失效的错误
if (error.response && error.response.status === 401) {
// 跳转到登录页
window.location.href = '/login';
// 取消所有剩余的请求
cancelSources.forEach(source => {
source.cancel('Token失效,已取消请求');
});
// 清空取消源数组
cancelSources = [];
}
return Promise.reject(error);
});
// 发送请求时使用创建的 axios 实例
instance.get('/some-endpoint').then(response => {
// 处理响应
}).catch(error => {
// 处理错误
});
axios请求中token失效,取消剩余请求
本文介绍了如何在axios中设置请求和响应拦截器,以及如何利用canceltoken管理请求,确保在token失效时优雅地重定向用户并取消未完成的请求。
摘要由CSDN通过智能技术生成