在一个页面中我们一般不会去同时多次去请求一个接口,可以防止重复点击提交,防止用户重复点击等等,首先需要一个容器去存放某个请求,并且同时将这个请求的取消函数与这个请求一一对应起来
const CancelToken = axios.CancelToken
//声明一个存放请求以及和这个请求对应的取消函数,他们的关系是一一对应的
export const requestMap = new Map() // 请求池
// 创建axios实例
const httpService = axios.create({
baseURL: baseUrl, // 需自定义
withCredentials: true,
// 请求超时时间
timeout: 10000 // 需自定义
});
在请求拦截器里面
httpService.interceptors.request.use(
config => {
const uniqueCode = config.method + config.baseURL + config.url;
//说明这个请求池中存在这个请求,还在进行中并没有结束
if (requestMap.get(uniqueCode)) {
// 防止提交表单等时候重复发起同一个请求(所以这里只限制了post请求)
if (config.method === 'post') {
// 取消重复请求(取消掉后面重复的请求)直接取消当前的请求,请求还未发出就被取消了,所以浏览器不会生成取消的记录
config.cancelToken = new CancelToken(cancel => cancel('请不要重复提交!'))//取消的是当前的请求
}
} else {
//存贮请求的唯一标识作为健key: 对应的取消函数作为值 value
config.cancelToken = new CancelToken(cancel => requestMap.set(uniqueCode, cancel))
}
return config;
},
error => {
// 请求错误处理
Promise.reject(error);
}
);
响应拦截器
// respone拦截器
httpService.interceptors.response.use(
response => {
// 剔除请求池中完成的请求
const uniqueCode = response.config.method.toLowerCase() + response.config.baseURL + response.config.url
if (requestMap.get(uniqueCode)) {
requestMap.delete(uniqueCode)
}
// 如果返回的状态码为200,说明接口请求成功,可以正常拿到数据
// 否则的话抛出错误
if (response.status === 200) {
return Promise.resolve(response.data);
} else {
return Promise.reject(response);
}
},
err => {
// 出错剔除错误的请求(取消的请求没有走到这里)
const uniqueCode = error.config.method.toLowerCase() + error.config.baseURL + error.config.url
if (requestMap.get(uniqueCode)) {
requestMap.delete(uniqueCode)
}
}