使用axios的请求拦截器拦截多次相同请求,在网上看到了一篇博客,但是他是多次相同请求,取消上一次,而我们的需求是取消下一次,所以要改一下。
在这里,两次请求的url和data相同,我们即认为是相同请求。
核心方法是用axios提供的取消函数,在请求发送之前取消掉。话不多说,直接上代码
import axios from "axios"
// import router from "../router/index"
import {Message} from 'element-ui'
let baseURL = process.env.baseUrl
function returnMsg(resultMsg) {
Message({
message: resultMsg,
type: 'warning'
});
}
let request = axios.create({
baseURL: baseURL,
headers: {
'Cache-Control': 'no-cache', //禁止从缓存读取
'Pragma': 'no-cache'
}
});
const paramsStr = params => {
let str = "";
let str = "";
if (typeof params === "undefined") {
str = ""
}else if (typeof params === "object") {
Object.keys(params).forEach(key => {
const element = params[key];
if (element || element == 0) {
if (str) {
str += `&${key}=${element}`;
} else {
str += `?${key}=${element}`;
}
}
});
} else {
str = `?${params}`;
}
return str;
}
// 存储所有的请求
var promiseArr = []
let s = 1.5 //单位秒,ajax取消延后时间
let pending = []; //声明一个数组用于存储每个请求的取消函数和axios标识
let cancelToken = axios.CancelToken;
let removePending = (config) => {
// console.log(new Date().getTime()-pending[pending.length - 2].t)
if (pending.length > 1 && pending[pending.length - 2].u === config.url + paramsStr(config.data||config.params) && pending[pending.length - 1].t - pending[pending.length - 2].t < s * 1000) {
console.log("ajax取消操作")
pending[pending.length-1].f(); //执行取消操作
pending.splice(pending.length, 1);
}
}
// 添加请求拦截器
request.interceptors.request.use(function (config) {
config.cancelToken = new cancelToken((c) => {
// 用请求地址&请求参数拼接的字符串
pending.push({u: config.url + paramsStr(config.data||config.params), t: new Date().getTime(), f: c});
});
removePending(config)
return config;
}, function (error) {
return Promise.reject(error);
});
// 添加响应拦截器
request.interceptors.response.use(function (response) {
if (response.data.code != 200) {
returnMsg(response.data.message)
}
return response.data;
}, function (error) {
return Promise.reject(error);
});
export default request