vue axios请求拦截,vue axios封装,避免重复请求
为了防止用户在网络不好或其他情况下，短时间内重复进行界面请求和发送重复请求，本文主要介绍了在Vue中Axios中取消请求和防止重复请求的方法。有兴趣的可以看看。
目录
阻塞请求目的：常见情况：新建一个axios.js文件Global main.js简介
阻止请求目的：
为了防止用户在网络不好或其他情况下短时间内反复发出接口请求，前端反复向后端发送多个请求。
常见情况：
PC:输入框搜索，多请求界面移动：移动容易造成误操作或多操作请求(移动无点击延迟)
注意：当存在加载掩码时，也可能出现重复请求。
新建 axios.js 文件
从“axios”导入axios；
//从导入路由器./js/router ；
//从“element-ui”导入{ Message }；
/**
* @description函数返回唯一的请求关键字**/
函数getRequestKey(配置){
让{
方法，
url，
参数，
数据
}=config
//在axios中取消请求和防止重复请求的方法
//当参数相同时防止重复请求：
//return [method，url，JSON.stringify(params)，JSON.stringify(data)]。联接(“”)；
//请求方法相同，但参数不同，以防止重复请求。
返回[方法，url]。联接(“”)；
}
/**
* @描述添加请求信息* */
let pending request=new Map()；
函数addPendingRequest(配置){
//console.log(config.url)
let request key=getRequestKey(config)；
config . cancel token=config . cancel token 新axios。CancelToken((取消)={
如果(！pending request . has(request key)){
pendingRequest.set(requestKey，cancel)；
}
});
}
/**
* @description取消重复请求* */
函数removePendingRequest(config) {
let request key=getRequestKey(config)；
if(pending request . has(request key)){
//如果是重复请求，执行相应的取消函数。
let cancel=pending request . get(request key)；
取消(request key)；
//删除以前的重复请求
pending request . delete(request key)；
}
}
/**
* @description请求拦截器* */
axios.interceptors.request.use(
功能(配置){
//检查是否有重复的请求，如果有则取消发送的请求。
removePendingRequest(config)；
//将当前请求信息添加到pendingRequest对象中
addpending request(config)；
返回配置；
},
功能(错误){
return Promise.reject(错误)；
}
);
/**
* @描述响应拦截器* */
axios . interceptors . response . use(
功能(响应){
//对响应数据做些什么
removePendingRequest(response . config)；
//项目中使用了此方法。
//if (response.data.message==您没有被授权){
//消息({
//类型：“警告”，
//消息：您未被授权，请重新登录，
//});
//local storage . remove item( token )；
//local storage . remove item( data )；
//router.push({
//名称：登录，
//});
//}
返回响应；
},
功能(错误){
//从pendingRequest对象中移除请求
remove pending request(error . config { })；
if (axios.isCancel(错误)){
Console.log(取消的重复请求： error . message )；
}
return Promise.reject(错误)；
}
);
导出默认axios
全局 main.js 引入
从“Vue”导入Vue；
从导入axios。/until/axios ；
Vue.prototype. $ axios=axios
这就是这篇关于在Vue中的Axios中取消请求和防止重复请求的方法的文章。有关在Axios中取消请求和防止重复请求的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。