vue axios同步请求解决方案,vue axios异步请求
在网项目开发的过程中，经常会遇到客服端重复发送请求的场景，下面这篇文章主要给大家介绍了关于某视频剪辑软件路由切换和爱可信接口取消重复请求的相关资料，需要的朋友可以参考下
目录
前言场景解决方案爱可信中如何取消请求项目中封装使用总结参考
前言
在日常前端开发中，经常会遇到频繁发起的重复请求，会给服务器及网络造成不必要的压力，可通过取消重复请求解决
场景
订单数据条件筛选查询表单提交按钮频繁点击路由页面切换请求未取消
解决方案
在每个请求发起的时候存储当前存储的标记在一个数组或地图中，针对每个请求的时候在请求拦截中查询是否重复，如果已重复则取消历史中重复的请求，再发起当前请求，如果没有重复，则添加存储标记并正常请求，已请求完成的清除存储标记
axios中如何取消请求
可以使用CancelToken.source工厂方法创建取消令牌，像这样：const CancelToken=axios .取消令牌
const source=cancel令牌。source()；
axios.get(/user/12345 ，{
cancelToken: source.token
}).接住(函数（抛出){
if (axios.isCancel(thrown)) {
console.log(请求已取消，扔了。消息)；
}否则{
//处理错误
}
});
axios.post(/user/12345 ，{
名称："新名称"
}, {
cancelToken: source.token
})
//取消请求（消息参数是可选的)
source.cancel(用户取消了操作。);
还可以通过传递一个执行者函数到取消令牌的构造函数来创建取消令牌：const CancelToken=axios .取消令牌
让取消；
axios.get(/user/12345 ，{
cancelToken:新的CancelToken(函数执行器(c) {
//执行者函数接收一个取消函数作为参数
取消=c；
})
});
//取消请求
cancel()；
项目中封装使用
基本变量定义
//是否取消重复请求开关
const cancelDuplicated=true
//存储每个请求中的地图
const pendingXHRMap=新地图()
//取消请求类型定义便于后期对此类型不做异常处理
const REQUEST_TYPE={
重复请求："重复请求"
}
设置重复标记的函数
const duplicatedKeyFn=(config)={
//可在此设置用户自定义其他唯一标识默认按请求方式请求地址
返回“${ config。方法} ${ config。URL } "
}
添加到请求记录
const addPendingXHR=(config)={
如果(!cancelDuplicated) {
返回
}
const重复键=JSON。stringify({
重复键：重复键fn(配置)，
类型：请求类型。重复_请求
})
配置。取消令牌=配置。取消令牌 新axios .CancelToken((取消)={
if (duplicatedKey！pendingxhrmap。has(重复键)){
pendingXHRMap.set(重复键，取消)
}
})
}
删除请求记录
const removePendingXHR=(config)={
如果(!cancelDuplicated) {
返回
}
const重复键=JSON。stringify({
重复键：重复键fn(配置)，
类型：请求类型。重复_请求
})
if(重复键待定xhrmap。has(重复键)){
const cancel=pendingxhrmap。获取(复制的密钥)
取消（重复键)
pendingxhrmap。删除(重复的密钥)
}
}
爱可信中使用
//请求拦截处理
axios。截击机。请求。使用(配置={
removePendingXHR(配置)
addPendingXHR(配置)
.
返回配置
})
//响应拦截处理
axios。截击机。回应。使用(response={
removePendingXHR(响应。配置)
.
},错误={
//如果是取消请求类型则忽略异常处理
设isDuplicatedType
尝试{
const错误类型=(JSON。解析(错误。消息) { } .类型
isDuplicatedType=错误类型===请求类型.重复请求；
} catch(错误){
isDuplicatedType=false
}
如果(!isDuplicatedType) {
//其他异常处理
}
})
在Vue中，当路由切换页面时，上一页的所有请求都被取消。
router.beforeEach((收件人，发件人，下一个)={
//遍历pendingMap，取消上一页的所有请求。
pendingxhrmap . foreach((cancel)={
cancel()；
});
pendingXHRMap.clear()
})
总结
主要介绍在日常前端开发中，各种情况下频繁发起的重复请求会对服务器和网络造成不必要的压力，可以通过取消重复请求来解决。
关于Vue路由切换和Axios接口重复请求取消的这篇文章到此为止。有关Vue Axios接口重复请求的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
参考
Axios官网取消请求。
如何优雅地解决“重复请求”的问题
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。