Vue路由切换和Axios接口取消重复请求详解
短信预约 -IT技能 免费直播动态提醒
前言
在日常前端开发中, 经常会遇到频繁发起的重复请求, 会给服务器及网络造成不必要的压力, 可通过取消重复请求解决
场景
- 订单数据条件筛选查询
- 表单提交按钮频繁点击
- 路由页面切换请求未取消
解决方案
在每个请求发起的时候存储当前存储的标记在一个数组或Map中, 针对每个请求的时候在请求拦截中查询是否重复, 如果已重复则取消历史中重复的请求, 再发起当前请求, 如果没有重复, 则添加存储标记并正常请求, 已请求完成的清除存储标记
axios中如何取消请求
- 可以使用
CancelToken.source工厂方法创建 cancel token，像这样：
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
axios.get('/user/12345', {
cancelToken: source.token
}).catch(function(thrown) {
if (axios.isCancel(thrown)) {
console.log('Request canceled', thrown.message);
} else {
// 处理错误
}
});
axios.post('/user/12345', {
name: 'new name'
}, {
cancelToken: source.token
})
// 取消请求（message 参数是可选的）
source.cancel('Operation canceled by the user.');- 还可以通过传递一个 executor 函数到 CancelToken 的构造函数来创建 cancel token：
const CancelToken = axios.CancelToken;
let cancel;
axios.get('/user/12345', {
cancelToken: new CancelToken(function executor(c) {
// executor 函数接收一个 cancel 函数作为参数
cancel = c;
})
});
// cancel the request
cancel();项目中封装使用
基本变量定义
// 是否取消重复请求开关
const cancelDuplicated = true
// 存储每个请求中的map
const pendingXHRMap = new Map()
// 取消请求类型定义 便于后期对此类型不做异常处理
const REQUEST_TYPE = {
DUPLICATED_REQUEST: 'duplicatedRequest'
}设置重复标记的函数
const duplicatedKeyFn = (config) => {
// 可在此设置用户自定义其他唯一标识 默认按请求方式 + 请求地址
return `${config.method}${config.url}`
}添加到请求记录
const addPendingXHR = (config) => {
if (!cancelDuplicated) {
return
}
const duplicatedKey = JSON.stringify({
duplicatedKey: duplicatedKeyFn(config),
type: REQUEST_TYPE.DUPLICATED_REQUEST
})
config.cancelToken = config.cancelToken || new axios.CancelToken((cancel) => {
if (duplicatedKey && !pendingXHRMap.has(duplicatedKey)) {
pendingXHRMap.set(duplicatedKey, cancel)
}
})
}删除请求记录
const removePendingXHR = (config) => {
if (!cancelDuplicated) {
return
}
const duplicatedKey = JSON.stringify({
duplicatedKey: duplicatedKeyFn(config),
type: REQUEST_TYPE.DUPLICATED_REQUEST
})
if (duplicatedKey && pendingXHRMap.has(duplicatedKey)) {
const cancel = pendingXHRMap.get(duplicatedKey)
cancel(duplicatedKey)
pendingXHRMap.delete(duplicatedKey)
}
}axios中使用
// 请求拦截处理
axios.interceptors.request.use(config => {
removePendingXHR(config)
addPendingXHR(config)
...
return config
})
// 响应拦截处理
axios.interceptors.response.use(response => {
removePendingXHR(response.config)
...
}, error => {
// 如果是取消请求类型则忽略异常处理
let isDuplicatedType;
try {
const errorType = (JSON.parse(error.message) || {}).type
isDuplicatedType = errorType === REQUEST_TYPE.DUPLICATED_REQUEST;
} catch (error) {
isDuplicatedType = false
}
if (!isDuplicatedType) {
// 其他异常处理
}
})Vue中当路由切换页面的时候，将上一个页面的所有请求取消
router.beforeEach((to, from, next) => {
// 遍历pendingMap，将上一个页面的所有请求cancel掉
pendingXHRMap.forEach((cancel) => {
cancel();
});
pendingXHRMap.clear()
})总结
本文主要介绍了在日常前端开发中, 遇到各种情况下频繁发起的重复请求, 会给服务器及网络造成不必要的压力, 可通过取消重复请求解决。
到此这篇关于Vue路由切换和Axios接口取消重复请求的文章就介绍到这了,更多相关Vue Axios接口重复请求内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
参考
axios官网取消请求
如何优雅的解决”重复请求“问题
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
