由于接口响应速度等原因，在项目开发中经常需要处理重复点击导致多次调用接口的问题，针对每个接口调用单独处理相对繁琐，这里通过axios提供的拦截器实现对重复请求的统一拦截处理。
import axios from 'axios'
import md5 from 'js-md5'
let pending = {};// 网络请求记录map结构
let CancelToken = axios.CancelToken;
请求拦截
axios.interceptors.request.use(config => {
// 通过请求url、method、params字段生成md5值
let key = md5(`${config.url}&${config.method}&${JSON.stringify(config.data)}`);
config.cancelToken = new CancelToken(c => {
if(pending[key]) {
if(Date.now() - pending[key] > 5000) {
// 超过5s，删除对应的请求记录，重新发起请求
delete pending[key];
} else {
// 5s以内的已发起请求，取消重复请求
c('repeated');
}
}
// 记录当前的请求，已存在则更新时间戳
pending[key] = Date.now();
});
}, error => {
return Promise.reject(error);
});
响应拦截
axios.interceptors.response.use(res => {
let key = md5(`${res.config.url.replace(/.*\/api/, '')}&${res.config.method}&${res.config.data}`);
if(pending[key]) {
// 请求结束，删除对应的请求记录
delete pending[key];
}
return res;
}, err => {
if(err.message !== 'repeated') {
// 非取消重复请求的报错，给出错误提示
let content = '系统错误！';
if(window.navigator.onLine) {
if(/timeout/.test(err)) {
content = '请求超时！';
}
} else {
content = '网络异常！';
}
alert(content);
}
return Promise.reject(err);
})
网友评论