axios通过cancelToken对象来取消用户重复提交的请求配置,如下:
import axios from 'axios';
//获取cancelToken对象
const CancelToken = axios.CancelToken;
//缓存对应的api和对应的cancelToken实例化对象
let cancelTokenMap = new Map();
const service = axios.create({
baseURL: process.env.BASE_URL,
timeout: 5000
});
service.interceptors.request.use(
config => {
//通过url和method作为key,但最好能加上用户的token来确保对应的用户的请求
let key = config.url + "-" + config.method;
//判断是否已经存在的请求,如果有就执行其对应的cancelToken的实例方法进行终止请求
if (cancelTokenMap.has(key)) {
cancelTokenMap.get(key)();
}
config.cancelToken = new CancelToken((c) => {
//获取每个请求的cancelToken的实例
cancelTokenMap.set(key, c);
})
return config;
},
error => {
console.log(error);
return Promise.reject();
}
);
service.interceptors.response.use(
response => {
//请求完成时,删除对应的请求缓存数据
let key = response.config.url + "-" + response.config.method;
if (cancelTokenMap.has(key)) {
cancelTokenMap.delete(key);
}
if (response.status === 200) {
return response.data;
} else {
Promise.reject();
}
},
error => {
debugger
console.log(error);
return Promise.reject();
}
);
export default service;
只需要三步:
第一步,声明cancelToken对象和缓存cancelToken的变量:
//获取cancelToken对象
const CancelToken = axios.CancelToken;
//缓存对应的api和对应的cancelToken实例化对象
let cancelTokenMap = new Map();
第二步: 在service.interceptors.request.use( config => {})里面获取对应请求的cancelToken实例对象和判断是否存在相同的请求,如果存在就取消之前的请求。配置:
//通过url和method作为key,但最好能加上用户的token来确保对应的用户的请求
let key = config.url + "-" + config.method;
//判断是否已经存在的请求,如果有就执行其对应的cancelToken的实例方法进行终止请求
if (cancelTokenMap.has(key)) {
cancelTokenMap.get(key)();
}
config.cancelToken = new CancelToken((c) => {
//获取每个请求的cancelToken的实例
cancelTokenMap.set(key, c);
})
第三步: 请求完成后,删除对应的缓存数据。在service.interceptors.response.use( response => {})里面配置,如下:
//请求完成时,删除对应的请求缓存数据
let key = response.config.url + "-" + response.config.method;
if (cancelTokenMap.has(key)) {
cancelTokenMap.delete(key);
}